useListNavigation handles focusing items differently when useClick event is click vs mousedown
Describe the bug
useListNavigation typically focuses list items on hover. However, depending on how the list popup was triggered, the way the items are focused differs.
If the popup is opened with a useClick where event: 'mousedown', the hovered items will receive a full :focus-visible focus.
However, if the event is click, the items only receive :focus, without :focus-visible.
To Reproduce
I have forked the "Select" sandbox and made two samples. The only difference between the two is the event used in useClick.
mousedown: https://codesandbox.io/p/devbox/happy-galileo-rckmp4?workspaceId=ws_XYKGWq7VGpXdgSejrbzwP7
click: https://codesandbox.io/p/devbox/quizzical-tharp-nlsvtp?workspaceId=ws_XYKGWq7VGpXdgSejrbzwP7
The items have the following css to show what type of focus is received:
[role="option"]:focus {
outline: 2px solid blue;
}
[role="option"]:focus-visible {
border: 2px solid red;
}This is a recording of the mousedown version:
https://github.com/user-attachments/assets/37609e06-d294-46a6-8245-60d1b2e1bf75
And here the click version:
https://github.com/user-attachments/assets/940cb777-caaf-475a-8fef-7d79a1ac9b7f
Expected behavior
Focus should behave the same regardless of what mouse event was used to open the dropdown.
Context:
- OS: macOS Tahoe 26.1
- Browser: tested under latest Chrome, Firefox, Safari - all behave the same to me
- Version:
"@floating-ui/react": "^0.26.6"
Source: floating-ui/floating-ui