Combobox behavior with immediate and autoFocus

[crymall]

Hi there,

I'm looking to create a combobox input that will be immediately focused on render and display a list of options underneath. In other words, I'd like to combine the functionality of immediate and autoFocus props on Combobox and ComboboxInput respectively.

The way it works now, however, is not the way that I expected. The input focuses immediately on render (apparently respecting the immediate prop), but the options do not display until either a) the user changes the input value manually, or b) the user focuses something else and then re-focuses the input. The former is, by my understanding, baked into the way Combobox normally works, and the latter is the immediate prop doing its thing, just a little later than I'd like it to.

Here's a sandbox example of the behavior I'm talking about. Note that you have to refresh the browser frame in order to see the behavior - the input is auto-focused, but the options do not render until a change in the input.

This is counterintuitive to me, and I'm sure there's a hack that would get me the outcome I'm looking for, but I was curious if it was intended behavior or merited the creation of an issue.

Thanks!

[yudin-s]

This sounds like a timing issue between the initial focus and the Combobox's open interaction.

autoFocus focuses the input as part of mounting, but immediate is normally responding to a focus interaction after the Combobox has finished wiring up its internal state. If focus happens too early during mount, the input can be focused visually while the options state has not gone through the same path as a user focus event.

A small workaround is to trigger focus after mount rather than relying on autoFocus during the initial render:

const inputRef = useRef<HTMLInputElement | null>(null)

useEffect(() => {
  requestAnimationFrame(() => {
    inputRef.current?.focus()
  })
}, [])

<Combobox immediate>
  <ComboboxInput ref={inputRef} />
  <ComboboxOptions>
    {/* options */}
  </ComboboxOptions>
</Combobox>

If that opens the list correctly, it would confirm this is mostly an ordering issue: mount-time autofocus happens before the Combobox can treat it like an immediate focus-open interaction.

For UX, I would also check whether the options should open with the full list before any query is typed. If yes, this seems reasonable as either a docs note or an issue, because immediate + autoFocus reads like it should produce that behavior.

[crymall]

@yudin-s thanks for the reply. After a lot more messing around, I'm now almost certain this behavior is related to the double-rendering that happens in React.StrictMode during development. In production builds, everything works intuitively.

That could be something to note in documentation (some kind of warning that certain edge cases might come up in development that aren't anything to worry about in prod) but I bet not, so I'm closing the discussion for now.