[React][Combobox] Specify an Option as being active

[mendelk]

I'd like to have the Combobox behave such that whenever the list is open and there are options to display, the first option is automatically active. I don't see a current way of accomplishing this. One way would perhaps to pass in an active prop into a Combobox.Option.

[cabello]

Me too, I watched https://www.youtube.com/watch?v=-jix4KyxLuQ and was working on my own command palette, then I noticed that feature was missing.
The examples mentioned in the video: VS Code and Chrome Inspector have that exact behaviour, you type something, the filtered list is shown with the first item active.
For a command palette that is a key behaviour for good UX, I can see how in a select box that may not be needed.

[axelv]

Indeed, this would make me move from downshift.js to the headles.ui

I was playing around with the Command Pallet in Tailwind UI and the option that is highlighted as active is pretty random:

[tobihagemann]

The only workaround I could find is to add a keydown.enter event to ComboboxInput and select the first item from your filtered list manually. This would still have missing styling though and I don't think that there is a "cleaner" workaround.

Would love to see this supported by this library!

[RobinMalfait]

Hey! Thank you for your suggestion!
Much appreciated! 🙏

This pr should fix that: #1279

[ragulka]

Would it be possible to make this behavior optional? Consider the examples here: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html

• List Autocomplete with Manual Selection
  • does not automatically highlight the first option
  • allows entering "ban", even though there is a "Banana" in the suggestions
• List Autocomplete with Automatic Selection
  • does automatically highlight the first option
  • does not allow entering "ban", because there is a "Banana" in the suggestions, and it's automatically selected

[howieweiner]

+1 for making this optional. I have a feature I cannot implement with the current auto-selection.

I don't think my requirement is atypical - when multiple results are returned, I want to be able to select an individual record and then go the details view.. but if I choose not to select a record, I want to hit return and go to a filtered list view for this search term.

[mneira10]

This would also be very useful in search where you want the user to be able to autocomplete if they find a suggested option they like but also search for the exact string they typed in case no suggested autocomplete options suits their needs.

[Sendrel]

Bump... is there any way to make this become optional?
I'm trying to achieve a functionality the same with google search box where you can search whatever you want and if you want to choose from the select options you can use down and up arrow keys.

Kinda like a noInitialOptionSelected prop

[adam-weinberg-ti]

Bump. Really wish this were optional. Makes it a pretty strange UX for keyboard users where they Tab onto the input field, and if they tab again, it applies the first option in the list. I'd expect tabbing to move to the next tabbable DOM element