Improve focus UX of MultiInputRows (#97695) (#97861)

Co-authored-by: Constance <[email protected]>
elastic · Apr 21, 2021 · 654548f · 654548f
1 parent 4b42523
commit 654548f
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 14 deletions.
diff --git a/...rise_search/public/applications/app_search/components/multi_input_rows/input_row.test.tsx b/...rise_search/public/applications/app_search/components/multi_input_rows/input_row.test.tsx
@@ -17,6 +17,7 @@ describe('InputRow', () => {
   const props = {
     value: 'some value',
     placeholder: 'Enter a value',
+    autoFocus: false,
     onChange: jest.fn(),
     onDelete: jest.fn(),
     disableDelete: false,
@@ -33,6 +34,7 @@ describe('InputRow', () => {
     expect(wrapper.find(EuiFieldText)).toHaveLength(1);
     expect(wrapper.find(EuiFieldText).prop('value')).toEqual('some value');
     expect(wrapper.find(EuiFieldText).prop('placeholder')).toEqual('Enter a value');
+    expect(wrapper.find(EuiFieldText).prop('autoFocus')).toEqual(false);
     expect(wrapper.find('[data-test-subj="deleteInputRowButton"]').prop('title')).toEqual(
       'Delete value'
     );

diff --git a/...nterprise_search/public/applications/app_search/components/multi_input_rows/input_row.tsx b/...nterprise_search/public/applications/app_search/components/multi_input_rows/input_row.tsx
@@ -12,6 +12,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiFieldText, EuiButtonIcon } from '@elastic
 interface Props {
   value: string;
   placeholder: string;
+  autoFocus: boolean;
   onChange(newValue: string): void;
   onDelete(): void;
   disableDelete: boolean;
@@ -23,6 +24,7 @@ import './input_row.scss';
 export const InputRow: React.FC<Props> = ({
   value,
   placeholder,
+  autoFocus,
   onChange,
   onDelete,
   disableDelete,
@@ -35,7 +37,7 @@ export const InputRow: React.FC<Props> = ({
         placeholder={placeholder}
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        autoFocus
+        autoFocus={autoFocus}
       />
     </EuiFlexItem>
     <EuiFlexItem grow={false}>

diff --git a/...arch/public/applications/app_search/components/multi_input_rows/multi_input_rows.test.tsx b/...arch/public/applications/app_search/components/multi_input_rows/multi_input_rows.test.tsx
@@ -27,6 +27,7 @@ describe('MultiInputRows', () => {
   };
   const values = {
     values: ['a', 'b', 'c'],
+    addedNewRow: false,
     hasEmptyValues: false,
     hasOnlyOneValue: false,
   };
@@ -56,6 +57,20 @@ describe('MultiInputRows', () => {
     expect(wrapper.find(InputRow).at(2).prop('value')).toEqual('c');
   });
 
+  it('focuses the first input row on load, but focuses new input rows on add', () => {
+    setMockValues({ ...values, addedNewRow: false });
+    const wrapper = shallow(<MultiInputRows {...props} />);
+
+    expect(wrapper.find(InputRow).first().prop('autoFocus')).toEqual(true);
+    expect(wrapper.find(InputRow).last().prop('autoFocus')).toEqual(false);
+
+    setMockValues({ ...values, addedNewRow: true });
+    rerender(wrapper);
+
+    expect(wrapper.find(InputRow).first().prop('autoFocus')).toEqual(false);
+    expect(wrapper.find(InputRow).last().prop('autoFocus')).toEqual(true);
+  });
+
   it('calls editValue when the InputRow value changes', () => {
     const wrapper = shallow(<MultiInputRows {...props} />);
     wrapper.find(InputRow).at(0).simulate('change', 'new value');

diff --git a/...se_search/public/applications/app_search/components/multi_input_rows/multi_input_rows.tsx b/...se_search/public/applications/app_search/components/multi_input_rows/multi_input_rows.tsx
@@ -44,7 +44,7 @@ export const MultiInputRows: React.FC<Props> = ({
   inputPlaceholder = INPUT_ROW_PLACEHOLDER,
 }) => {
   const logic = MultiInputRowsLogic({ id, values: initialValues });
-  const { values, hasEmptyValues, hasOnlyOneValue } = useValues(logic);
+  const { values, addedNewRow, hasEmptyValues, hasOnlyOneValue } = useValues(logic);
   const { addValue, editValue, deleteValue } = useActions(logic);
 
   useEffect(() => {
@@ -55,17 +55,22 @@ export const MultiInputRows: React.FC<Props> = ({
 
   return (
     <>
-      {values.map((value: string, index: number) => (
-        <InputRow
-          key={`inputRow${index}`}
-          value={value}
-          placeholder={inputPlaceholder}
-          onChange={(newValue) => editValue(index, newValue)}
-          onDelete={() => deleteValue(index)}
-          disableDelete={hasOnlyOneValue}
-          deleteLabel={deleteRowLabel}
-        />
-      ))}
+      {values.map((value: string, index: number) => {
+        const firstRow = index === 0;
+        const lastRow = index === values.length - 1;
+        return (
+          <InputRow
+            key={`inputRow-${id}-${index}`}
+            value={value}
+            placeholder={inputPlaceholder}
+            autoFocus={addedNewRow ? lastRow : firstRow}
+            onChange={(newValue) => editValue(index, newValue)}
+            onDelete={() => deleteValue(index)}
+            disableDelete={hasOnlyOneValue}
+            deleteLabel={deleteRowLabel}
+          />
+        );
+      })}
       <EuiButtonEmpty
         size="s"
         iconType="plusInCircle"

diff --git a/...public/applications/app_search/components/multi_input_rows/multi_input_rows_logic.test.ts b/...public/applications/app_search/components/multi_input_rows/multi_input_rows_logic.test.ts
@@ -22,6 +22,7 @@ describe('MultiInputRowsLogic', () => {
   };
   const DEFAULT_VALUES = {
     values: MOCK_VALUES,
+    addedNewRow: false,
     hasEmptyValues: false,
     hasOnlyOneValue: false,
   };
@@ -48,11 +49,12 @@ describe('MultiInputRowsLogic', () => {
     });
 
     describe('addValue', () => {
-      it('appends an empty string to the values array', () => {
+      it('appends an empty string to the values array & sets addedNewRow to true', () => {
         logic.actions.addValue();
 
         expect(logic.values).toEqual({
           ...DEFAULT_VALUES,
+          addedNewRow: true,
           hasEmptyValues: true,
           values: ['a', 'b', 'c', ''],
         });

diff --git a/...arch/public/applications/app_search/components/multi_input_rows/multi_input_rows_logic.ts b/...arch/public/applications/app_search/components/multi_input_rows/multi_input_rows_logic.ts
@@ -9,6 +9,7 @@ import { kea, MakeLogicType } from 'kea';
 
 interface MultiInputRowsValues {
   values: string[];
+  addedNewRow: boolean;
   hasEmptyValues: boolean;
   hasOnlyOneValue: boolean;
 }
@@ -51,6 +52,12 @@ export const MultiInputRowsLogic = kea<
         },
       },
     ],
+    addedNewRow: [
+      false,
+      {
+        addValue: () => true,
+      },
+    ],
   }),
   selectors: {
     hasEmptyValues: [(selectors) => [selectors.values], (values) => values.indexOf('') >= 0],