greena13 / react-hotkeys

Declarative hotkey and focus area management for React
https://github.com/greena13/react-hotkeys
ISC License
2.15k stars 161 forks source link

[BUG] Sequences like 'g' then '1' kills every other hotkeys after first execution #255

Open dannystyleart opened 4 years ago

dannystyleart commented 4 years ago

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:

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):

Codesandbox for reproduction https://codesandbox.io/s/react-hotkeys-issue-v6gvy

dannystyleart commented 4 years ago

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

rmadsen commented 4 years ago

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.

dannystyleart commented 4 years ago

@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.

greena13 commented 4 years ago

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.

v-bbrady commented 4 years ago

@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'
dannystyleart commented 4 years ago

@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:

@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.

Harjot1Singh commented 4 years ago

@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.

JoeDuncko commented 3 years ago

FYI I was getting errors from Jest with this fix unless I imported KeyEventManager like so:

import KeyEventManager from "react-hotkeys/cjs/lib/KeyEventManager"