[SelectUnstyled] Implement text navigation

[michaldudak]

Support text navigation (highlighting options that begin with typed characters). This works in native selects and in Material UI's one (implemented in #8191).

[ivan-ngchakming]

I will work on this issue.
I am not sure if this is claimed (the issue seem to be assigned to you)? If not, I think I'd like to work on this issue.

I have looked over the code and I think this is what needs to be done:

1. Add textCriteriaRef to track user inputs in useListbox hook (same as textCriteriaRef in MenuList)
2. implement logic (to produce same behavior as [MenuList] Add text keyboard focus navigation #15495) to determine which option should be highlighted, which can be done by either
   • handling the logic within the useListbox hook, pass in the option to be highlighted to the dispatch function and dispatch a setHighlight action or
   • pass in the textCriteriaRef to listboxReducer and let the reducer decide which option to highlight in handleKeyDown (similar to moveFocus in MenuList)
3. update unit test for defaultListboxReducer
4. add unit test for useListbox and integration test for SelectUnstyled

did I miss anything?

[michaldudak]

Hi @ivan-ngchakming, you're free to work on this.
It's a pretty good breakdown, however, one important difference between useListbox and MenuList is that useListbox works on objects (e.g. options can be arbitrary objects), whereas MenuList works on its children's DOM nodes. useListbox will need a function that can convert an object option into its string representation.