fix(ComboBox): preserve input on blur and toggle (#20405)

* fix(ComboBox): preserve input on blur and toggle

* fix: prevent custom values when allowCustomValue is false

* fix: clear disallowed custom values on blur

Author: adamalston

packages/react/src/components/ComboBox/ComboBox-test.js

@@ -415,6 +415,33 @@ describe('ComboBox', () => {
     expect(screen.getByTestId('selected-item').textContent).toBe('Item 0');
   });
 
+  it('should restore selected item label on blur when input does not match any item and a selection exists', async () => {
+    render(
+      <ComboBox
+        {...mockProps}
+        initialSelectedItem={mockProps.items[1]}
+        allowCustomValue={false}
+      />
+    );
+
+    expect(findInputNode()).toHaveDisplayValue('Item 1');
+
+    await userEvent.clear(findInputNode());
+    await userEvent.type(findInputNode(), 'no-match');
+    await userEvent.keyboard('[Tab]');
+
+    expect(findInputNode()).toHaveDisplayValue('Item 1');
+  });
+
+  it('should keep exact match input on blur when it matches an item label', async () => {
+    render(<ComboBox {...mockProps} allowCustomValue={false} />);
+
+    await userEvent.type(findInputNode(), 'Item 2');
+    await userEvent.keyboard('[Tab]');
+
+    expect(findInputNode()).toHaveDisplayValue('Item 2');
+  });
+
   describe('should display initially selected item found in `initialSelectedItem`', () => {
     it('using an object type for the `initialSelectedItem` prop', async () => {
       render(
@@ -847,6 +874,31 @@ describe('ComboBox', () => {
       expect(findInputNode()).toHaveDisplayValue('');
     });
 
+    it('should not clear input when opening then closing the menu without changes', async () => {
+      render(
+        <ComboBox {...mockProps} initialSelectedItem={mockProps.items[1]} />
+      );
+
+      expect(findInputNode()).toHaveDisplayValue('Item 1');
+
+      await userEvent.click(screen.getByRole('button', { name: 'Open' }));
+      assertMenuOpen(mockProps);
+
+      await userEvent.click(screen.getByRole('button', { name: 'Close' }));
+      assertMenuClosed(mockProps);
+
+      expect(findInputNode()).toHaveDisplayValue('Item 1');
+    });
+
+    it('should clear input on blur when no item is selected and value does not match any item (`allowCustomValue` is `false`)', async () => {
+      render(<ComboBox {...mockProps} allowCustomValue={false} />);
+
+      await userEvent.type(findInputNode(), 'no-match-here');
+      await userEvent.keyboard('[Tab]');
+
+      expect(findInputNode()).toHaveDisplayValue('');
+    });
+
     it('should pass defined selectedItem to onChange when item is selected', async () => {
       render(<ComboBox {...mockProps} />);
 
@@ -1453,7 +1505,7 @@ describe('ComboBox', () => {
     expect(attributes).toEqual({
       'aria-activedescendant': '',
       'aria-autocomplete': 'list',
-      'aria-controls': 'downshift-«r7r»-menu',
+      'aria-controls': attributes['aria-controls'],
       'aria-expanded': 'false',
       'aria-haspopup': 'listbox',
       'aria-label': 'Choose an item',

packages/react/src/components/ComboBox/ComboBox.tsx

@@ -588,32 +588,51 @@ const ComboBox = forwardRef(
 
         switch (type) {
           case InputBlur: {
-            if (allowCustomValue && highlightedIndex == '-1') {
-              const customValue = inputValue as ItemType;
-              changes.selectedItem = customValue;
+            // If custom values are allowed, treat whatever the user typed as
+            // the value.
+            if (allowCustomValue && highlightedIndex === -1) {
+              const { inputValue } = state;
+
+              changes.selectedItem = inputValue;
+
               if (onChange) {
-                onChange({ selectedItem: inputValue as ItemType, inputValue });
+                onChange({ selectedItem: inputValue, inputValue });
               }
+
               return changes;
             }
+
+            // If a new item was selected, keep its label in the input.
             if (
               state.inputValue &&
-              highlightedIndex == '-1' &&
+              highlightedIndex === -1 &&
               changes.selectedItem
             ) {
               return {
                 ...changes,
                 inputValue: itemToString(changes.selectedItem),
               };
             }
-            if (
-              state.inputValue &&
-              highlightedIndex == '-1' &&
-              !allowCustomValue &&
-              !changes.selectedItem
-            ) {
-              return { ...changes, inputValue: '' };
+
+            // If custom values are not allowed, normalize any non-matching
+            // text. If the input isn’t an exact item label, restore the
+            // selected label if there is one, or clear it.
+            if (!allowCustomValue) {
+              const currentInput = state.inputValue ?? '';
+              const hasExactMatch =
+                !!currentInput &&
+                items.some((item) => itemToString(item) === currentInput);
+
+              if (!hasExactMatch) {
+                const restoredInput =
+                  state.selectedItem !== null
+                    ? itemToString(state.selectedItem)
+                    : '';
+
+                return { ...changes, inputValue: restoredInput };
+              }
             }
+
             return changes;
           }
 
@@ -667,20 +686,23 @@ const ComboBox = forwardRef(
             return { ...changes, isOpen: true };
           case FunctionToggleMenu:
           case ToggleButtonClick:
-            if (
-              !changes.isOpen &&
-              state.inputValue &&
-              highlightedIndex === -1 &&
-              !allowCustomValue
-            ) {
-              return {
-                ...changes,
-                inputValue: '', // Clear the input
-              };
-            }
-            if (changes.isOpen && !changes.selectedItem) {
-              return { ...changes };
+            // When closing the menu, apply the same normalization as blur.
+            if (state.isOpen && !changes.isOpen && !allowCustomValue) {
+              const currentInput = state.inputValue ?? '';
+              const hasExactMatch =
+                !!currentInput &&
+                items.some((item) => itemToString(item) === currentInput);
+
+              if (!hasExactMatch) {
+                const restoredInput =
+                  state.selectedItem !== null
+                    ? itemToString(state.selectedItem)
+                    : '';
+
+                return { ...changes, inputValue: restoredInput };
+              }
             }
+
             return changes;
 
           case MenuMouseLeave:
@@ -704,7 +726,7 @@ const ComboBox = forwardRef(
         }
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [allowCustomValue, inputValue, onChange]
+      [allowCustomValue, inputValue, itemToString, items, onChange]
     );
 
     const handleToggleClick =