fix(17119): combobox not displaying selected option once search query is cleared (#18498)

* fix(17119): combobox not displaying option

* test: include unit testing

* test: update AVT tests.

* fix: changes request + avt testing fix

* test: update testcases

* test: import findMenuItemNode

* test: remove console.log

---------

Co-authored-by: ebg <ebg@ibm.com>
Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>

Author: 3 people

.all-contributorsrc

@@ -1763,6 +1763,15 @@
         "a11y",
         "review"
       ]
+    },
+    {
+      "login": "enricobguedes",
+      "name": "enricobguedes",
+      "avatar_url": "https://avatars.githubusercontent.com/u/45374536?v=4",
+      "profile": "https://github.com/enricobguedes",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -325,6 +325,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/a88zach"><img src="https://avatars.githubusercontent.com/u/1724822?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zach Tindall</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=a88zach" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/vsvsv"><img src="https://avatars.githubusercontent.com/u/9214692?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vsevolod Platunov</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=vsvsv" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/heloiselui"><img src="https://avatars.githubusercontent.com/u/71858203?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Heloise Lui</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=heloiselui" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=heloiselui" title="Documentation">📖</a> <a href="#a11y-heloiselui" title="Accessibility">️️️️♿️</a> <a href="https://github.com/carbon-design-system/carbon/pulls?q=is%3Apr+reviewed-by%3Aheloiselui" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://github.com/enricobguedes"><img src="https://avatars.githubusercontent.com/u/45374536?v=4?s=100" width="100px;" alt=""/><br /><sub><b>enricobguedes</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=enricobguedes" title="Code">💻</a></td>
   </tr>
 </table>
 

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

@@ -16,6 +16,7 @@ import {
   generateGenericItem,
   cognateItems,
   waitForPosition,
+  findMenuItemNode,
 } from '../ListBox/test-helpers';
 import ComboBox from '../ComboBox';
 import { AILabel } from '../AILabel';
@@ -817,5 +818,50 @@ describe('ComboBox', () => {
 
       expect(input).toHaveDisplayValue('Apple');
     });
+
+    it('should remove input and enter new conditions', async () => {
+      const user = userEvent.setup();
+      render(<ComboBox {...mockProps} typeahead />);
+
+      const input = screen.getByRole('combobox');
+      user.click(input);
+
+      await user.keyboard('[Enter]');
+
+      expect(input).toHaveDisplayValue('');
+    });
+
+    it('should open the menu and select null when Enter is pressed with no input and no highlighted item', async () => {
+      const onInputChange = jest.fn();
+
+      render(<ComboBox {...mockProps} onInputChange={onInputChange} />);
+
+      await userEvent.type(findInputNode(), 'apple');
+      expect(findInputNode()).toHaveDisplayValue('apple');
+      await userEvent.keyboard('[Enter]');
+
+      // Delete the selected item
+      await userEvent.keyboard('[Backspace]');
+      await userEvent.keyboard('[Backspace]');
+      await userEvent.keyboard('[Backspace]');
+      await userEvent.keyboard('[Backspace]');
+      await userEvent.keyboard('[Backspace]');
+      // check for an empty value
+      expect(findInputNode()).toHaveDisplayValue('');
+
+      // blur
+      await userEvent.keyboard('[Tab]');
+      assertMenuClosed(mockProps);
+
+      // open the menu
+      await userEvent.click(findInputNode());
+      assertMenuOpen(mockProps);
+
+      // check if the `li` item are all false
+      for (let i = 0; i < mockProps.items.length; i++) {
+        const item = findMenuItemNode(i);
+        expect(item).toHaveAttribute('aria-selected', 'false');
+      }
+    });
   });
 });

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

@@ -854,6 +854,9 @@ const ComboBox = forwardRef(
 
     const handleFocus = (evt: FocusEvent<HTMLDivElement>) => {
       setIsFocused(evt.type === 'focus');
+      if (!inputRef.current?.value && evt.type === 'blur') {
+        selectItem(null);
+      }
     };
 
     const readOnlyEventHandlers = readOnly
@@ -1024,6 +1027,17 @@ const ComboBox = forwardRef(
                       toggleMenu();
                     }
                   }
+                  if (
+                    !inputValue &&
+                    highlightedIndex == -1 &&
+                    event.key == 'Enter'
+                  ) {
+                    if (!isOpen) toggleMenu();
+                    selectItem(null);
+                    event.preventDownshiftDefault = true;
+                    if (event.currentTarget.ariaExpanded === 'false')
+                      openMenu();
+                  }
                   if (typeahead && event.key === 'Tab') {
                     //  event.preventDefault();
                     const matchingItem = items.find((item) =>