Select first option on Tab/Enter even when it's not matched for the hint

Version

3.4.5

Steps to reproduce

1. Go to the examples page
2. Click in the input field for the first one, the Basic Example.
3. Type “ask”.
4. Note that the menu shows two matches: “Alaska” and “Nebraska”.
5. Hit <kbd>Tab</kbd>.

Expected Behavior

The first option “Alaska” becomes selected since it matches what the user typed.

Actual Behavior

Nothing is selected.

Miscellaneous

At first, I assumed it was caused by my custom menu renderer so I asked on Stack Overflow, but someone pointed out that getHintText() specifically requires the match to be at the start of the label. Perhaps a feature to override this behavior is preferable to changing it for everyone.

[dharkness]

FWIW, when I go to google.com, enter a search term, and hit <kbd>Tab</kbd>, the first result does not get selected. Navigating to a result and hitting <kbd>Tab</kbd> also does not select the highlighted result.

Man, I haven’t used Google’s site in forever. 😃 In Chrome at least, typing a domain in your history into the address bar hints the first match in the bar itself. Hitting enter navigates to that URL. I’m fine with only <kbd>Enter</kbd> triggering the navigation, but I don’t think that matters since that’s not how the component is designed to function.

Since I have the options in my state, all I need to do is capture <kbd>Enter</kbd> when the user is in the input. That seems straight-forward enough without actually changing any of the code. Sorry, I got hung up on having to use <kbd>Tab</kbd> originally that I didn’t think of this more obvious solution until just now.

Thanks so much for your help!

[dharkness]

Good point. 😉