Ability to auto-activate the first matching option in Combobox

[callumlocke]

Hello. I'm hoping there's a way to do this already, otherwise I'd like to propose it as a feature.

Using the demo in the docs, if you type "T", you get three matching options, like this:

...but if you press "Enter" at this point, it just changes the box back to the default option ("Wade Cooper"). In my particular use case, this feels weird and unexpected. To get it to actually choose, say, the first option ("Tom Cook"), I have to press "Down" first before pressing "Enter".

What I'd like: a way to force it so that, whenever options are visible, there is always an option activated (the first, by default), i.e. so it would look like this instead:

This way, I can just type a few characters, and if the first option is the one I want, I can just hit "Enter" to select it, without having to press the "Down" arrow key first. Is there any way to achieve this behaviour with the existing API?

[callumlocke]

I attempted a hack: I passed a ref to ComboBox.Input (this seems to be passed to the actual input element correctly), and then in a useEffect I dispatched a fake new KeyboardEvent('keydown', { key: 'ArrowDown' }) on the input (whenever there's a query entered and the activeIndex is reported by ComboBox to be null and the input is focused)... but for some reason this doesn't work. Looking at the source, I feel like it should, but it doesn't. Any suggestions welcome.

[HemalR]

Agree with the UI flow you have laid out. I think we could figure out a hacky way to allow it, but it is unlikely to be ideal and would have flaws. This seems like a good default, if not, I would like to see it as an option via a prop.

[jdlien]

@callumlocke Something like this could be an improvement. The way the input works now, users can type in something and have the impression that they have selected something when they have not. Without some kind of rigorous front-end validation, it can lead to a confusing UX because the option won't have changed when a user may think it has.

[RobinMalfait]

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

This should be fixed, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.
• npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

[Seolhun]

Very interesting.
I had the problem that the activeIndex starts from 0 when I press Enter on the other hand.

I made an Autocomplete Component with Combobox. When the User hits Enter, I don't know if the user wants to enter a search or select the index item of 0. Therefore, I need a way to tell this apart. If activeIndex starts from 0, this problem cannot be solved.

It would be nice to have props that can control the activeIndex. Do you have good ideas fir this? 🙏🏽

[deanmikan]

Agree with above, allow us to disable auto-selecting the first option!

[mhafren]

I would also like to disable to auto-select. Otherwise working fine!

[amazingmaze]

Same here. Works fine but this auto-select function breaks the component for use as a "regular" search.

[lcnogueira]

@zipme , were you able to find a solution for what you mentioned here #1320 (reply in thread) ?

[Fabioni]

same here: auto-select function breaks the component for use as a "regular" search