[GEN-1762]: fix auto-focus for input lists (#1861)

odigos-io · Nov 26, 2024 · 9707d28 · 9707d28
1 parent 9bb0916
commit 9707d28
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/frontend/webapp/reuseable-components/input-list/index.tsx b/frontend/webapp/reuseable-components/input-list/index.tsx
@@ -110,7 +110,7 @@ const InputList: React.FC<InputListProps> = ({ initialValues = [], value, onChan
 
       {rows.map((val, idx) => (
         <InputRow key={`input-list-${idx}`}>
-          <Input value={val} onChange={(e) => handleInputChange(e.target.value, idx)} autoFocus={rows.length > 1 && idx === rows.length - 1} />
+          <Input value={val} onChange={(e) => handleInputChange(e.target.value, idx)} autoFocus={!val && rows.length > 1 && idx === rows.length - 1} />
           <DeleteButton disabled={isDelButtonDisabled} onClick={() => handleDeleteInput(idx)}>
             <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>

diff --git a/frontend/webapp/reuseable-components/input-table/index.tsx b/frontend/webapp/reuseable-components/input-table/index.tsx
@@ -132,18 +132,22 @@ export const InputTable: React.FC<Props> = ({ columns, initialValues = [], value
         <tbody>
           {rows.map((row, idx) => (
             <tr key={`input-table-row-${idx}`} style={{ height: '50px' }}>
-              {columns.map(({ type, keyName, placeholder }, innerIdx) => (
-                <td key={`input-table-${idx}-${keyName}`} style={{ maxWidth, padding: '0 2px' }}>
-                  <Input
-                    type={type}
-                    placeholder={placeholder}
-                    value={row[keyName]}
-                    onChange={({ target: { value: val } }) => handleChange(keyName, type === 'number' ? Number(val) : val, idx)}
-                    autoFocus={rows.length > 1 && idx === rows.length - 1 && innerIdx === 0}
-                    style={{ maxWidth, paddingLeft: 10 }}
-                  />
-                </td>
-              ))}
+              {columns.map(({ type, keyName, placeholder }, innerIdx) => {
+                const value = row[keyName];
+
+                return (
+                  <td key={`input-table-${idx}-${keyName}`} style={{ maxWidth, padding: '0 2px' }}>
+                    <Input
+                      type={type}
+                      placeholder={placeholder}
+                      value={value}
+                      onChange={({ target: { value: val } }) => handleChange(keyName, type === 'number' ? Number(val) : val, idx)}
+                      autoFocus={!value && rows.length > 1 && idx === rows.length - 1 && innerIdx === 0}
+                      style={{ maxWidth, paddingLeft: 10 }}
+                    />
+                  </td>
+                );
+              })}
 
               <td>
                 <DeleteButton disabled={isDelButtonDisabled} onClick={() => handleDeleteRow(idx)}>

diff --git a/frontend/webapp/reuseable-components/key-value-input-list/index.tsx b/frontend/webapp/reuseable-components/key-value-input-list/index.tsx
@@ -108,18 +108,18 @@ export const KeyValueInputsList: React.FC<KeyValueInputsListProps> = ({ initialK
   };
 
   // Check if any key or value field is empty
-  const isAddButtonDisabled = rows.some((pair) => pair.key.trim() === '' || pair.value.trim() === '');
+  const isAddButtonDisabled = rows.some(({ key, value }) => key.trim() === '' || value.trim() === '');
   const isDelButtonDisabled = rows.length <= 1;
 
   return (
     <Container>
       <FieldLabel title={title} required={required} tooltip={tooltip} />
 
-      {rows.map((pair, idx) => (
+      {rows.map(({ key, value }, idx) => (
         <Row key={`key-value-input-list-${idx}`}>
-          <Input placeholder='Attribute name' value={pair.key} onChange={(e) => handleChange('key', e.target.value, idx)} autoFocus={rows.length > 1 && idx === rows.length - 1} />
+          <Input placeholder='Attribute name' value={key} onChange={(e) => handleChange('key', e.target.value, idx)} autoFocus={!value && rows.length > 1 && idx === rows.length - 1} />
           <Image src='/icons/common/arrow-right.svg' alt='Arrow' width={16} height={16} />
-          <Input placeholder='Attribute value' value={pair.value} onChange={(e) => handleChange('value', e.target.value, idx)} />
+          <Input placeholder='Attribute value' value={value} onChange={(e) => handleChange('value', e.target.value, idx)} />
           <DeleteButton disabled={isDelButtonDisabled} onClick={() => handleDeleteRow(idx)}>
             <Image src='/icons/common/trash.svg' alt='Delete' width={16} height={16} />
           </DeleteButton>