refactor: improve template input

apps/client/src/features/app-settings/panel/automations-panel/AutomationForm.tsx

@@ -380,13 +380,13 @@ export default function AutomationForm(props: AutomationFormProps) {
                     <Panel.Error>{rowErrors?.address?.message}</Panel.Error>
                   </label>
                   <label>
-                    Parameters
+                    Arguments
                     <TemplateInput
                       {...register(`outputs.${index}.args`)}
+                      value={output.args}
                       variant='ontime-filled'
                       size='sm'
                       placeholder='1'
-                      autoComplete='off'
                     />
                     <Panel.Error>{rowErrors?.args?.message}</Panel.Error>
                   </label>

apps/client/src/features/app-settings/panel/automations-panel/template-input/TemplateInput.tsx

@@ -33,13 +33,11 @@ const TemplateInput = forwardRef(function TemplateInput(props: TemplateInputProp
 
     if (event.target.value.endsWith('{')) {
       setShowSuggestions(true);
+      setSuggestions(updateSuggestions(event.target.value));
     } else if (event.target.value === '' || event.target.value.endsWith('}}')) {
       setShowSuggestions(false);
-    }
+    } else if (showSuggestions) {
-
+      setSuggestions(updateSuggestions(event.target.value));
-    if (showSuggestions) {
-      const suggestions = updateSuggestions(event.target.value);
-      setSuggestions(suggestions);
     }
 
     onChange?.(event);
@@ -55,7 +53,7 @@ const TemplateInput = forwardRef(function TemplateInput(props: TemplateInputProp
 
   return (
     <div className={style.wrapper} ref={mergeRefs(localRef, ref)}>
-      <Input {...rest} value={inputValue} onChange={handleInputChange} autoComplete='off' autoCorrect='off' />
+      <Input value={inputValue} {...rest} onChange={handleInputChange} autoComplete='off' autoCorrect='off' />
       {showSuggestions && suggestions.length > 0 && (
         <ul className={style.suggestions}>
           {suggestions.map((suggestion) => (

apps/client/src/features/app-settings/panel/automations-panel/template-input/__tests__/templateInput.utils.test.ts

@@ -6,10 +6,8 @@ describe('matchRemaining()', () => {
     expect(matchRemaining('{{{hum', '{{human}}')).toBe('an}}');
     expect(matchRemaining('send {', '{{human}}')).toBe('{human}}');
 
-    // we should be able to match the following
+    expect(matchRemaining('{', '{{human}}')).toBe('{human}}');
-    // however, the current implementation only needs to deal with strings that start with {{
+    expect(matchRemaining('{{', '{{human}}')).toBe('human}}');
-    // expect(matchRemaining('{', '{{human}}')).toBe('{human}}');
-    // expect(matchRemaining('{{', '{{human}}')).toBe('human}}');
   });
 
   it('should return an empty string if there are no matches or if it is complete', () => {

apps/client/src/features/app-settings/panel/automations-panel/template-input/templateInput.utils.ts

@@ -83,6 +83,16 @@ export function matchRemaining(a: string, b: string) {
     return '';
   }
 
+  // naive match assuming that a template will start with {{
+  if (a.endsWith('{{') && b.startsWith('{{')) {
+    return b.substring(2);
+  }
+
+  // naive match assuming that a template will start with {
+  if (a.endsWith('{') && b.startsWith('{{')) {
+    return b.substring(1);
+  }
+
   for (let i = 0; i < b.length; i++) {
     const searchString = b.substring(0, i + 1);
     if (a.endsWith(searchString)) {