fix(combobox): multiselect combobox now clears input value on select (#…

…3140)

* fix(combobox): now clears input value on select

* test(combobox): add a test

* test: jestify input value changing

* fix(combobox): controlled values

.changeset/sharp-readers-hammer.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/combobox': patch
+'@twilio-paste/core': patch
+---
+
+[Combobox] Multiselect Combobox now correctly clears the input value when selecting an item in the dropdown.

packages/paste-core/components/combobox/__tests__/MultiselectCombobox.spec.tsx

@@ -47,7 +47,7 @@ const MultiselectComboboxMock: React.FC<Partial<MultiselectComboboxProps>> = (pr
       }}
       onSelectedItemsChange={(selectedItems: string[]) => {
         // eslint-disable-next-line no-console
-        console.log(selectedItems);
+        // console.log(selectedItems);
       }}
       required
       {...props}
@@ -143,6 +143,30 @@ describe('MultiselectCombobox', () => {
       const renderedLabel = document.querySelector('label');
       expect(renderedLabel!.getAttribute('for')).toEqual(renderedTextbox.getAttribute('id'));
     });
+
+    it('should clear the input on selection', async () => {
+      render(<MultiselectComboboxMock initialIsOpen={false} />, {
+        wrapper: ThemeWrapper,
+      });
+
+      // Open the combobox
+      const renderedCombobox = screen.getByRole('combobox');
+      fireEvent.click(renderedCombobox);
+
+      // Focus the textbox
+      const renderedTextbox = screen.getByRole('textbox');
+      renderedTextbox.focus();
+      // Value should be ''
+      expect(renderedTextbox.getAttribute('value')).toEqual('');
+      // Change the value to 'Al'
+      fireEvent.change(renderedTextbox, {target: {value: 'Al'}});
+      expect(renderedTextbox.getAttribute('value')).toEqual('Al');
+
+      // Selecting an option clears the value in the input box
+      const renderedOptions = screen.getAllByRole('option');
+      fireEvent.click(renderedOptions[0]);
+      expect(renderedTextbox.getAttribute('value')).toEqual('');
+    });
   });
 
   describe('Groups', () => {

packages/paste-core/components/combobox/src/multiselect/GrowingInput.tsx

@@ -15,6 +15,10 @@ export const GrowingInput = React.forwardRef<HTMLInputElement, GrowingInputProps
   ({element = 'GROWING_INPUT', onChange, initialValue = '', value, ...props}, ref) => {
     const [text, setText] = React.useState(value || initialValue);
 
+    React.useEffect(() => {
+      setText(value || '');
+    }, [value]);
+
     /*
      * The trick is to make the input 100% width of the wrapper
      * and the wrapper is sized based on the content of the _after
@@ -53,10 +57,11 @@ export const GrowingInput = React.forwardRef<HTMLInputElement, GrowingInputProps
           ref={ref}
           element={element}
           type="text"
-          value={text}
+          value={value != null ? value.replace(/  +/g, ' ') : text}
           padding="space0"
           onChange={(event) => {
             event.preventDefault();
+            // Used to set the width of the growing input
             setText(event.currentTarget.value.replace(/  +/g, ' '));
 
             if (onChange != null) {

packages/paste-core/components/combobox/src/multiselect/MultiselectCombobox.tsx

@@ -173,6 +173,9 @@ export const MultiselectCombobox = React.forwardRef<HTMLInputElement, Multiselec
               ...changes,
               highlightedIndex: -2,
             };
+          /* Fixes issue where controlled input values were getting blown away by Downshift */
+          case useComboboxPrimitive.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+            return {...changes, inputValue};
         }
         return changes;
       },