Problem
Menu items have two independent highlight mechanisms: keyboard state is real DOM focus with a _focusVisible outline, while mouse state is pure CSS :hover background (src/components/DropdownMenu/DropdownMenuItem.recipe.ts:14-20). Keyboard navigation moves focus via useListFocus (src/components/DropdownMenu/menuUtils.tsx:98-149), but items have no onMouseEnter (DropdownMenuItem.tsx:87-120), so hovering never moves the active position.
Result: arrow-key to item A, then hover item B — A keeps its focus ring while B shows the hover background. Two items look active at once, and pressing Enter fires A (the focused one), not the hovered one the user is looking at. ContextMenu shares the same item component and keyboard hook (src/components/ContextMenu/ContextMenu.tsx:42,336), so it has the identical problem.
Related: Select.recipe.ts:52,64 and MultiSelect.recipe.ts:51,107 also stack _hover on top of the highlighted state; those mostly self-heal because handleOptionMouseEnter syncs highlight (src/internal/useSelectListbox.tsx:256-266), but a stationary pointer plus arrow keys still lights up two options.
Expected
A single highlight that both input methods move: hovering an item moves the highlight (and the keyboard active position) there; arrowing away removes it from the hovered item.
Suggested fix
On item mouse-enter, move DOM focus (or the shared active index) to the hovered item, and drive the highlight from that single source of state rather than raw :hover styling. Add tests covering mixed keyboard+mouse interaction.
Problem
Menu items have two independent highlight mechanisms: keyboard state is real DOM focus with a
_focusVisibleoutline, while mouse state is pure CSS:hoverbackground (src/components/DropdownMenu/DropdownMenuItem.recipe.ts:14-20). Keyboard navigation moves focus viauseListFocus(src/components/DropdownMenu/menuUtils.tsx:98-149), but items have noonMouseEnter(DropdownMenuItem.tsx:87-120), so hovering never moves the active position.Result: arrow-key to item A, then hover item B — A keeps its focus ring while B shows the hover background. Two items look active at once, and pressing Enter fires A (the focused one), not the hovered one the user is looking at.
ContextMenushares the same item component and keyboard hook (src/components/ContextMenu/ContextMenu.tsx:42,336), so it has the identical problem.Related:
Select.recipe.ts:52,64andMultiSelect.recipe.ts:51,107also stack_hoveron top of the highlighted state; those mostly self-heal becausehandleOptionMouseEntersyncs highlight (src/internal/useSelectListbox.tsx:256-266), but a stationary pointer plus arrow keys still lights up two options.Expected
A single highlight that both input methods move: hovering an item moves the highlight (and the keyboard active position) there; arrowing away removes it from the hovered item.
Suggested fix
On item mouse-enter, move DOM focus (or the shared active index) to the hovered item, and drive the highlight from that single source of state rather than raw
:hoverstyling. Add tests covering mixed keyboard+mouse interaction.