[combobox] Focus does not loop correctly — requires two Down Arrow presses for focus to wrap from last item to first

[bbetav1]

Current Behavior

When using the Combobox component with loop focus enabled (which is the default, as it allows looping through items), pressing the down arrow key from the last item does not immediately focus the first item. Instead, the focus seems to disappear or go elsewhere (I'm not sure where), and I need to press the down arrow a second time to reach the first item. This disrupts smooth keyboard navigation.

Expected Behavior

Pressing the down arrow from the last item should seamlessly loop back and focus the first item on the first press, without any skip or lost focus. For comparison, in similar libraries like Ark UI (https://ark-ui.com/docs/components/combobox), the combobox handles this looping correctly without requiring an extra key press.

Steps To Reproduce

1. Go to the official Base UI Combobox documentation: https://base-ui.com/react/components/combobox.
2. Open the combobox popup (on any example).
3. Use the down arrow to navigate to the last item.
4. Press down arrow again —focus doesn't go to the first item; press once more to get there.

Environment

• Base UI version: 1.0.0-rc.0
• Browser: Brave 1.85.111 (Official Build) (64-bit), Chromium: 143.0.7499.40
• OS: Windows 10

I noticed that the example of combobox from Floating UI home page has the same problem.

[atomiks]

Does your concern here apply only to Combobox, or Autocomplete as well? At least for the Autocomplete component, this behavior is common/intentional.

Google Search + YouTube Search autocomplete (role=combobox widgets) both include the input as part of the focus loop.

google-search-combobox.mov

---

In Material UI this behavior is called includeInputInList:

---

If you enable the autoHighlight prop on Combobox, including the input as part of the focus loop gets disabled however

[bbetav1]

Thanks @atomiks. autoHighlight resolved the focus skipping issue in Combobox for my use case.

Isn't it intuitive to make autoHighlight default to true in Combobox, aligning with patterns in other UI libraries for smoother out-of-the-box keyboard navigation?

I believe to better match standard autocomplete behaviors (e.g., Google/YouTube), the input value could update to reflect the currently focused item during keyboard navigation. (or is that also possible, but I don't know!)

For the Autocomplete component, keeping autoHighlight as false by default makes sense, but adding the input update on focus would make it more consistent with real-world examples.

[atomiks]

For the Autocomplete component, keeping autoHighlight as false by default makes sense, but adding the input update on focus would make it more consistent with real-world examples.

<Autocomplete.Root mode="both"> turns this on

autoHighlight resolved the focus skipping issue in Combobox for my use case.

It's not actually "skipping", it's just that the input is part of the focus loop, which complies with the ARIA authoring guidelines by default. What's not obvious is that the input is "receiving" the virtual focus when the highlight disappears. A data-* state attribute for the input will be added in a new PR so this is clearer.

autoHighlight on the other hand is not part of the authoring guidelines to date, and in that case I made it match what Chrome's omnibox search widget does which defaults to auto highlighting the first item and doesn't include the input as part of the focus loop.

[github-actions]

This fix will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui/react@3592