'Space'-shortcut overrides native behavior triggering focused elements
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 56/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- react, typescript
- Domain
- frontend
Research direction
Start with the linked CodeSandbox and trace how useHotkey('Space', ...) handles focused elements, especially document.activeElement. The change is done when Space preserves native activation for focused button-like elements while still triggering the shortcut when nothing relevant is focused; consider whether Enter has the same behavior.
Written by the indexing model from the issue text.
Description
TanStack Hotkeys version
0.10.0
Framework/Library version
React 18.3.1
Describe the bug and the steps to reproduce it
Issue:
The space key can be used (at least on Mac) to trigger a focussed element such as a button.
The smart default (smart default: false for Mod+S, true for single keys) doesn't take this behavior into account.
This means once a useHotkey('Space',...-shortcut is set up this behavior is lost.
Likely a similar case for the "Enter"-key
Expected behavior:
It should make an exception for button-like (buttons, checkboxes, links, etc.) to preserve native behavior. i.e. "click" the button if focused, even if a 'Short'-hotkey is set.
My workaround:
const isNothingFocused = () => {
return document.activeElement === document.body || document.activeElement === null;
};
useHotkey('Space', () => {
if (isNothingFocused()) {
doSomeAction();
} else {
// Allow space for confirmation
(document.activeElement as HTMLElement)?.click();
}
});
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
https://codesandbox.io/p/sandbox/stoic-snyder-59xd9x
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
No, because I do not know how or whether it follows your design principles
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.
- Dominant language
- TypeScript
- Stars
- 733
- Forks
- 47
- Avg merge
- 18h 46m
- Merged PRs (30d)
- 9
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing 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.
More from TanStack/hotkeys
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
TanStack/hotkeys#105 · 2 comments ·
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 50/100
TanStack/hotkeys#143 · 1 reaction ·
Maintainers usually reply within 1 day
-
Difficulty 3/5 1-2 days Newbie friendliness 55/100
TanStack/hotkeys#138 · 1 comment ·
Maintainers usually reply within 1 day
-
Dependency DashboardOpen
Difficulty 4/5 3-5 days Newbie friendliness 25/100
Maintainers usually reply within 1 day
All issues in TanStack/hotkeys
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
-
keytrace logo svg?Open
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
HigherOrderCO/Bend#1294 ·
-
Price: 75 USD Priority: 2 (Medium) Time: <1 Hour
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day