Global single-key hotkeys fire while a focused ARIA composite widget (tabs/menu/listbox/grid…) already owns the key
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 719
- Forks
- 47
- Avg merge
- 5d 5h
- Merged PRs (30d)
- 1
Description
TanStack Hotkeys version
@tanstack/react-hotkeys@0.9.1 (core @tanstack/hotkeys@0.8.0)
Framework/Library version
React 19.2.4
Describe the bug and the steps to reproduce it
A hotkey registered for a plain key (e.g. ArrowDown) on the default document target still fires while the user is navigating inside a menu/list widget that uses that same key for its own keyboard navigation. Result: a double action — the menu moves its highlighted item and the global hotkey runs on the one keypress.
In our app this happens in a list of steps where each row has a "More actions" dropdown menu: with the menu open, pressing ↑/↓ moves through the menu items and moves the selected step in the list behind it — the arrows drive both at once. It isn't specific to menus; the same occurs with any widget that owns arrow keys (Select/listbox, Tabs, etc.).
Steps to reproduce
- Register a global hotkey on the default target:
useHotkey("ArrowDown", () => setCount(c => c + 1)). - Render a Radix dropdown menu (a
role="menu"with a fewrole="menuitem"items). - Open the menu and press ↓.
Actual: the menu highlights the next item and the global ArrowDown callback fires (counter increments).
Expected: only the menu moves — a global hotkey shouldn't fire while a focused widget is already using that key for its own navigation (the same way ignoreInputs already prevents hotkeys from firing while you type in an input).
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
None
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
None
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the default document-target handling behind useHotkey and reproduce the issue with a focused role="menu" containing role="menuitem" elements, using ArrowDown. Done means the menu continues its own keyboard navigation while the global ArrowDown callback does not fire for that keypress.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100