react-hotkeys icon indicating copy to clipboard operation
react-hotkeys copied to clipboard

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

Open dannystyleart opened this issue 4 years ago • 8 comments

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

dannystyleart avatar Nov 15 '19 14:11 dannystyleart

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

dannystyleart avatar Nov 25 '19 15:11 dannystyleart

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 avatar Dec 09 '19 21:12 rmadsen

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

dannystyleart avatar Dec 12 '19 11:12 dannystyleart

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.

greena13 avatar Jan 01 '20 19:01 greena13

@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 avatar Jun 11 '20 19:06 v-bbrady

@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 avatar Jun 12 '20 19:06 dannystyleart

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

Harjot1Singh avatar Jul 13 '20 14:07 Harjot1Singh

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

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

JoeDuncko avatar Nov 17 '20 20:11 JoeDuncko