fix(combobox): keep local inputValue state in sync with Downshift (#628)

Author: jzempel

package-lock.json

@@ -894,21 +894,40 @@ describe('ComboboxContainer', () => {
         });
 
         it('handles controlled selection as expected', () => {
+          const _options = [{ value: 'test-1' }, { value: 'test-2' }, { value: 'test-3' }];
+
           expect(listboxOptions[0]).toHaveAttribute('aria-selected', 'false');
 
           rerender(
             <TestCombobox
               layout={layout}
-              options={[{ value: 'test-1' }, { value: 'test-2' }, { value: 'test-3' }]}
+              options={_options}
               isExpanded={false}
-              inputValue=""
+              inputValue="test-1"
               activeIndex={-1}
               selectionValue="test-1"
               onChange={handleChange}
             />
           );
 
           expect(listboxOptions[0]).toHaveAttribute('aria-selected', 'true');
+          expect(input).toHaveValue('test-1');
+
+          // simulate controlled selection change
+          rerender(
+            <TestCombobox
+              layout={layout}
+              options={_options}
+              isExpanded={false}
+              inputValue="test-2"
+              activeIndex={-1}
+              selectionValue="test-2"
+              onChange={handleChange}
+            />
+          );
+
+          expect(listboxOptions[1]).toHaveAttribute('aria-selected', 'true');
+          expect(input).toHaveValue('test-2');
         });
 
         it('handles controlled multiple selection as expected', () => {

packages/combobox/src/ComboboxContainer.spec.tsx

@@ -69,6 +69,7 @@ export const useCombobox = <
   const [triggerContainsInput, setTriggerContainsInput] = useState<boolean>();
   const [downshiftInputValue, setDownshiftInputValue] = useState(inputValue);
   const [matchValue, setMatchValue] = useState('');
+  const useInputValueRef = useRef(true);
   const matchTimeoutRef = useRef<number>();
   const previousStateRef = useRef<IPreviousState>();
   const prefix = useId(idPrefix);
@@ -142,6 +143,13 @@ export const useCombobox = <
     return defaultActiveIndex;
   }, [defaultActiveIndex, isAutocomplete, isEditable]);
 
+  if (useInputValueRef.current && inputValue !== downshiftInputValue) {
+    // Update local state with Downshift `inputValue` for non-buggy cases.
+    setDownshiftInputValue(inputValue);
+  } else {
+    useInputValueRef.current = true;
+  }
+
   /*
    * Validation
    */
@@ -645,6 +653,7 @@ export const useCombobox = <
             // Override needed to workaround Downshift cursor bug.
             // https://github.com/downshift-js/downshift/issues/1108
             setDownshiftInputValue(event.target.value);
+            useInputValueRef.current = false;
 
             // Override needed to workaround Downshift IME bug.
             // https://github.com/downshift-js/downshift/issues/1452