Open combobox on focus

[jorenvanhee]

I would like show the combobox options when the input field is focused. This gives the users a visible cue with the available options before they start typing.

I tried implementing this myself using onFocus and onBlur on Combobox.Input, combined with static Combobox.Options.

// ...
<Combobox.Input
  onChange={(event) => setQuery(event.target.value)}
  displayValue={(person) => person.name}
  onFocus={() => setFocused(true)}
  onBlur={() => setFocused(false)}
/>
{(open || focused) && (
// ...

https://stackblitz.com/edit/react-stebo6?file=src/App.js

Everything looks fine at first, but when you click an option, it doesn't get selected.

I think the issue is that the component gets re-rendered when the focus changes. By that time open is already false and the click never happens. Not sure if this is an Idea or a Bug, but I think it could be useful for more people.

[jorenvanhee]

Just saw there's already a discussion open for this (#1236), this one can be deleted :)