chore(combobox): refactor to use useCombobox

[tay1orjones]

Closes #14684
Closes #15927

🚧 WIP

[tw15egan]

We may want to look into fixing #15927 in this PR as well

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	ab83b9f
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/66182978a12e5800073c383c
😎 Deploy Preview	https://deploy-preview-15904--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.

[tay1orjones]

@tw15egan could you double check that the recent fix #15980 is still correctly implemented here?

[tw15egan]

@tay1orjones Most of it is there, but it should autofocus the first item in the Combobox when it is opened when no item is selected. When an item is selected, the correct behavior is observed

[tay1orjones]

I've fixed a couple things:

• I added forwardRef to ListBoxTrigger which got rid of the error failing all the unit tests
• TJ's note: the first item is highlighted when the menu opens when nothing is selected

A much bigger issue I have yet to track down is that opening the menu and selecting an item with enter doesn't work at all. The selectedItem is never updated. The state reducer example from the downshift docs works properly without having to do anything special. I'm not sure why ours isn't working. I've added some failing conditions to the e2e test that should pass once it's fixed.

Also I think we should double check the stateReducer logic surrounding allowCustomValue. Thanks @tw15egan for outlining how this should work:

Pressing enter should clear the input if allowCustomValue is OFF and the search string does not have any matches. If a user then hit enter, clears since it doesn’t match any options. Any other time it should be matching a value and should select that one.

[tay1orjones]

Two additional items we need to look into::

• This impacts styling for dropdown - the borders specifically are flashing on the disabled item, also every item looks disabled The fix for this was to reinstate the old behavior of putting disabled on disabled menu items instead of aria-disabled. This avoids any potential breaking changes, and makes it so we don't have to touch styling at all to avoid impacting other components.
• on hover of a listboxitem, it's applying the focus ring when it shouldn't be - the focus ring should only be present when navigating via keyboard - this is due to [useSelect]: highlightedIndex vs selectedItem downshift-js/downshift#935
  • It appears onmousemove useCombobox is setting the highlighted index to the item currently hovered by the mouse. We need to modify this behavior so the highlighted index only changes if the item is actually selected via click or enter, or if the item has been highlighted via focus by keyboard navigation.

[tay1orjones]

Duplicate of #16283