Skip to content

Add an option to ignore focus trigger if not triggered by keyboard #1082

@JoosepAlviste

Description

@JoosepAlviste

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:

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions