[Bug](ui): focus styles on Select items are not applied properly

[franzheidl]

The focus styles (focus ring) on items in a Select menu are not applied properly / not consistently:

When opening the menu by clicking the Select using the mouse, the menu opens as expected, not showing a focus style which is correct. When hovering an item in the menu, the item has an outline applied that may be the focus-ring, or at least could be mistaken for a focus ring (note this appears to be inconsistent, I managed to open the menu using the mouse and the focus-ring was applied to the whole menu, too):

In any event, this needs investigating, clarification on the expected behavior and fixing.

When opening the menu using the keyboard, the menu as a whole has a focus ring applied (which seems correct?).

In both cases, when using the arrow keys to navigate between the menu items, no focus ring is applied at all, leaving the user in the dark as to which item would be selected once he hits Enter. This is a serious a11y-flaw and should be fixed:

Bildschirmaufnahme.2026-06-09.um.10.34.53.mov

Also, when looking at this issue, we shoudl investigate whether the problem is more global and if ComboBox, PopupMenuetc, are affected as well.

Investigation Findings:

The inconsistent focus styles have three distinct causes:

1. Missing keyboard focus indicator on menu items (a11y flaw)

The active render prop from Headless UI's ListboxOption/ComboboxOption is commented out in SelectOption and ComboBoxOption. Additionally, the focus ring styles are applied via CSS :hover only (hover:ring-*), not via Headless UI's data-active attribute. Since arrow-key navigation never triggers :hover, no visual indicator is shown when navigating with the keyboard — the user has no way to tell which item is focused.

2. Spurious focus ring around the menu panel

The ListboxOptions element has no explicit focus:outline-hidden, so the browser's default outline bleeds through when the panel receives focus. The focus:ring visible in the code is correctly placed on the ListboxButton (the trigger) and should stay — only the missing suppression on the panel itself needs to be fixed.

3. Same issue present in ComboBox

ComboBoxOption has identical styling to SelectOption and is affected in the same way.

PopupMenu is not affected by the item-level focus ring issue, but the active/focus properties from the Headless UI MenuItem render bag are not wired up to item styles, so keyboard-focused items have no highlight there either — worth a follow-up.

Fix Approach

• Replace hover:ring-* / hover:bg-* with data-[active]:ring-* / data-[active]:bg-* on SelectOption and ComboBoxOption. Headless UI sets data-active on both mouse hover and keyboard focus, so this handles both cases correctly without needing the render prop.
• Add focus:outline-hidden to the ListboxOptions element in Select to suppress the browser default outline on the panel.

[franzheidl]

Closing as most of this has been addressed/fixed with merging #1779 and #1780 respectively.

The only remaining focus-related issue on Select items when using the keyboard to navigate is tracked and will be addressed under #1781 .