Follow-up to #1748 / #1774.
When opening a Select via keyboard and navigating with arrow keys, several keystrokes are consumed before the first menu item appears focused. The menu items are there and selectable, but the focus ring does not appear until after a number of arrow presses.
Root Cause
The Select menu is rendered inside a portal using Floating UI. The floating container <div> receives getFloatingProps() from @floating-ui/react's useInteractions, which spreads interaction props — including a tabIndex — onto the div. This places the container and/or the ListboxOptions element into the browser's sequential focus order. Arrow key presses are consumed navigating through these invisible focusable elements before Headless UI's virtual list navigation kicks in for the items.
Fix
Add tabIndex={-1} explicitly to the floating container <div> in Select.component.tsx so it can still receive programmatic focus (required by Floating UI) but is excluded from sequential keyboard navigation.
Acceptance criteria
Follow-up to #1748 / #1774.
When opening a
Selectvia keyboard and navigating with arrow keys, several keystrokes are consumed before the first menu item appears focused. The menu items are there and selectable, but the focus ring does not appear until after a number of arrow presses.Root Cause
The
Selectmenu is rendered inside a portal using Floating UI. The floating container<div>receivesgetFloatingProps()from@floating-ui/react'suseInteractions, which spreads interaction props — including atabIndex— onto the div. This places the container and/or theListboxOptionselement into the browser's sequential focus order. Arrow key presses are consumed navigating through these invisible focusable elements before Headless UI's virtual list navigation kicks in for the items.Fix
Add
tabIndex={-1}explicitly to the floating container<div>inSelect.component.tsxso it can still receive programmatic focus (required by Floating UI) but is excluded from sequential keyboard navigation.Acceptance criteria