react-hotkeys
react-hotkeys copied to clipboard
[BUG] Sequences like 'g' then '1' kills every other hotkeys after first execution
Describe the bug A clear and concise description of what the bug is. If we want to create vim like 'g' then '1' hotkeys where the user presses letter g, releases and then presses number 1 are not working. After first execution of any hotkey mapped, the one letter ones are unbinded
How are you using react hotkeys components? (HotKeys, GlobalHotKeys, IgnoreKeys etc) I would like to register global hotkeys via GlobalHotKeys component that are having sequences like:
- 'a' then '1'
- 'g' then 'l' and one letter ones too like 'c' to create message or 'v' to create not and 'b' to tasklist.
Expected behavior A clear and concise description of what you expected to happen. Should work for sequences correctly without unbinding others.
Platform (please complete the following information):
- Version of react-hotkeys: 2.0.0
- Browser [e.g. chrome, safari]: chrome 78, firefox 71
- OS: [e.g. iOS]: Linux, MacOs, Winows
Codesandbox for reproduction https://codesandbox.io/s/react-hotkeys-issue-v6gvy
Update I was able to solve this issue, by explicitly import KeyEventManager helper class and call KeyEventManager.getInstance()._clearKeyHistory() in the key handlers.
As it turnt out there is a key always stuck in the listening queue and as a result the previous key sequence's last key will be the "base" for next key events
I've been running into this as well. It seems to be the same underlying problem as #219, though I like the solution you have here more. Any details on how to explicitly import KeyEventManager
? I wasn't able to find that class exported anywhere in the package.
@rmadsen yes, there is no public export of KeyEventManager class, so you have to import it either from cjs or es module depending on how your project is configured.
I have imported from the es directory from 'react-hotkeys/es/lib/KeyEventManager' path. However clearing keyhistory was the only solution for stuck keys like for '?' key on the hungarian-105 we have to press shift and comma.
Later on I have abandoned the idea of using this library - due no respnse at all - and created custom by using hotkeys-js which this library using too.
Thanks for posting your issue.
Unfortunately I do not have the time to actively work on this package, but I am seeking other active maintainers. If you are willing to create a pull request or help out, that would be an excellent way of moving this forward.
@rmadsen @dannystyleart could either of you explicitly tell me how to import KeyEventManager.. I'm getting an error with:
import KeyEventManager from "react-hotkeys/es/lib/KeyEventManager"
error:
Could not find a declaration file for module 'react-hotkeys/es/lib/KeyEventManager'. 'c:/Users/v-bbrady/projects/AzureNotebooks/AzureNotebooks/src/client/aznb-component/node_modules/react-hotkeys/es/lib/KeyEventManager.js' implicitly has an 'any' type.
Try `npm install @types/react-hotkeys` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-hotkeys/es/lib/KeyEventManager'
@v-bbrady this is because you are using typescript.
I was using this package in an ES project so I did not face this problem but I think the solution for your problem would be:
- define the type explicitly
- turn off type checking for that import / line.
@greena13 I have moved away from that feature but as soon as I have time for it I'll try to make a fix and PR for it.
@dannystyleart your solution works, but unfortunately, if you keep holding down a modifier key from the previous hotkey, and then press another key for another hotkey that has the same modifier, the modifier key gets erased from the listening queue.
Given
ctrl+d
=> action 1
ctrl+y
=> action 2
Case 1:
Hold ctrl
Press d
=> Action 1 fires
Press y
=> Action 2 does not fire
Case 2:
Hold ctrl
Press d
=> Action 1 fires
Release ctrl
Hold ctrl
Press y
=> Action 2 fires
Looks like getting around this requires a more robust fix in the codebase itself.
FYI I was getting errors from Jest with this fix unless I imported KeyEventManager
like so:
import KeyEventManager from "react-hotkeys/cjs/lib/KeyEventManager"