Akryum / Akryum/floating-vue

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

Open
#1,082 0 comments 3 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
3.5k
Forks
341
Avg merge
14m
Merged PRs (30d)
8

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:

https://github.com/user-attachments/assets/94b036b9-b83d-4c63-903b-07f78c7b2e45

The demo is using the [DropdownMenu component from Reka UI](https://reka-ui.com/docs/components/dropdown-menu).

## 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](https://floating-ui.com/docs/usefocus#visibleonly)
- Reka UI Tooltip component has a [`ignoreNonKeyboardFocus` prop](https://reka-ui.com/docs/components/tooltip#root)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.