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

[enricobguedes]

Closes #17119

Changelog

New

• Added new checks within combo box for empty inputs and no text highlights to invalidate user selection (return to empty state as intented).
• Added check for the blur functionality to do the same as the above, returning the component state to empty/not selected
• Both mimic the clearSelection state.

Changed

• N/A

Removed

• N/A

Testing / Reviewing

Using the Carbon storybook for react components, reviewers can test as shown in the original issue reported.

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	c8dad91
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/67aa167140694d0008f47611
😎 Deploy Preview	https://deploy-preview-18498--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	c8dad91
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67aa1672526f4b0008345b19
😎 Deploy Preview	https://deploy-preview-18498--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	c8dad91
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/67aa1671aa842f00085d6341
😎 Deploy Preview	https://deploy-preview-18498--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Attention: Patch coverage is 54.54545% with 5 lines in your changes missing coverage. Please review.

Project coverage is 84.04%. Comparing base (ca5f92f) to head (c8dad91).
Report is 25 commits behind head on main.

Files with missing lines	Patch %	Lines
...ackages/react/src/components/ComboBox/ComboBox.tsx	54.54%	5 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #18498      +/-   ##
==========================================
- Coverage   84.04%   84.04%   -0.01%     
==========================================
  Files         408      408              
  Lines       14470    14481      +11     
  Branches     4660     4717      +57     
==========================================
+ Hits        12162    12171       +9     
- Misses       2142     2145       +3     
+ Partials      166      165       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[guidari]

Looking good so far! Thanks for opening that! 🚀

A couple things. Looks like the Combobox is not opening when pressing Enter anymore. Combobox should open when pressing Enter. The test should remaing the same in this case.

[guidari]

I'm not sure about this test. Is it testing the functionality you created?

Otherwise we could add a test like that, to test step by step the interaction with the Combobox.

You will noticed that if you remove the changes you made in the Combox.tsx this test will fail (as expected), however it will pass with the current changes (as expected)

 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);
        console.log({ item });
        expect(item).toHaveAttribute('aria-selected', 'false');
      }
    });
    ```

[enricobguedes]

Yes, this is the test I've created for this addition! I will add this extra evaluation then, thanks!

[github-actions]

Thanks for your submission! We ask that you all sign our Developer Certificate of Origin before we can accept your contribution. You can sign the DCO by adding a comment below using this text:

---

I have read the DCO document and I hereby sign the DCO.

---

2 out of 3 committers have signed the DCO.
✅ (enricobguedes)[https://github.com/enricobguedes]
✅ (guidari)[https://github.com/guidari]
❌ @EBG
ebg seems not to be a GitHub user. You need a GitHub account to be able to sign the DCO. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You can retrigger this bot by commenting recheck in this Pull Request. Posted by the DCO Assistant Lite bot.}

[kennylam]

LGTM, thanks!