-
Notifications
You must be signed in to change notification settings - Fork 342
Description
Problem
Currently, the focus
trigger just uses the focus
event, so focusing an element with JavaScript also triggers it.
This means that if a tooltip is used on a button which opens a dropdown, then closing the dropdown would show the tooltip again, since the dropdown trigger is focused automatically (which is correct from an accessibility perspective). I would still like to show the tooltip on focus, but only if the user used their keyboard to focus the element.
Here's a demo of the issue:
Screen.Recording.2025-07-03.at.08.48.58.mov
The demo is using the DropdownMenu component from Reka UI.
Proposed solution
Ideally, there would be a focus-visible
trigger, which would behave like the CSS :focus-visible
selector, meaning that it would only get triggered on focus with a keyboard.
Another idea could be to have an ignoreNonKeyboardFocus
option somewhere.
Here are some approaches I've found in other projects that mimic :focus-visible
:
- Floating UI has a useFocus hook, which accepts a
visibleOnly
prop - Reka UI Tooltip component has a
ignoreNonKeyboardFocus
prop