cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-09-01 20:39:18 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

fix: missing reference on template input

Browse Source
This commit is contained in:
Carlos Valente
2025-02-18 10:56:30 +01:00
committed by Carlos Valente
parent 1f6f3df0f2
commit 0ede753652
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/app-settings/panel/automations-panel/template-input/TemplateInput.tsx
+9 -7
View File
@@ -1,6 +1,6 @@
import { useMemo, useState } from 'react'; import { forwardRef, useMemo, useState } from 'react';
import { type InputProps, Input } from '@chakra-ui/react'; import { type InputProps, Input } from '@chakra-ui/react';
import { useClickOutside } from '@mantine/hooks'; import { mergeRefs, useClickOutside } from '@mantine/hooks';
import useCustomFields from '../../../../../common/hooks-query/useCustomFields'; import useCustomFields from '../../../../../common/hooks-query/useCustomFields';
@@ -10,10 +10,10 @@ import style from './TemplateInput.module.scss';
interface TemplateInputProps extends InputProps {} interface TemplateInputProps extends InputProps {}
export default function TemplateInput(props: TemplateInputProps) { const TemplateInput = forwardRef(function TemplateInput(props: TemplateInputProps, ref) {
const { value, onChange, ...rest } = props; const { value, onChange, ...rest } = props;
const { data } = useCustomFields(); const { data } = useCustomFields();
const ref = useClickOutside(() => setShowSuggestions(false)); const localRef = useClickOutside(() => setShowSuggestions(false));
const autocompleteList = useMemo(() => { const autocompleteList = useMemo(() => {
return makeAutoCompleteList(data); return makeAutoCompleteList(data);
@@ -31,7 +31,7 @@ export default function TemplateInput(props: TemplateInputProps) {
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(event.target.value); setInputValue(event.target.value);
if (event.target.value.endsWith('{{')) { if (event.target.value.endsWith('{')) {
setShowSuggestions(true); setShowSuggestions(true);
} else if (event.target.value === '' || event.target.value.endsWith('}}')) { } else if (event.target.value === '' || event.target.value.endsWith('}}')) {
setShowSuggestions(false); setShowSuggestions(false);
@@ -54,7 +54,7 @@ export default function TemplateInput(props: TemplateInputProps) {
}; };
return ( return (
<div className={style.wrapper} ref={ref}> <div className={style.wrapper} ref={mergeRefs(localRef, ref)}>
<Input {...rest} value={inputValue} onChange={handleInputChange} autoComplete='off' autoCorrect='off' /> <Input {...rest} value={inputValue} onChange={handleInputChange} autoComplete='off' autoCorrect='off' />
{showSuggestions && suggestions.length > 0 && ( {showSuggestions && suggestions.length > 0 && (
<ul className={style.suggestions}> <ul className={style.suggestions}>
@@ -67,4 +67,6 @@ export default function TemplateInput(props: TemplateInputProps) {
)} )}
</div> </div>
); );
} });
export default TemplateInput;