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 few role="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
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 defaultdocumenttarget 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
useHotkey("ArrowDown", () => setCount(c => c + 1)).role="menu"with a fewrole="menuitem"items).Actual: the menu highlights the next item and the global
ArrowDowncallback 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
ignoreInputsalready 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