greena13 / react-hotkeys

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

[BUG] - released key is still considered pressed #294

Open pau-not-paul opened 4 years ago

pau-not-paul commented 4 years ago

Describe the bug When typing a capital letter using shift (shift+letter), sometimes it registers the keydown event for the upper case letter but then it registers the keyup event for the lower case letter. Since it doesn't have a keyup event for the upper case letter, it thinks that it's still presses

How are you using react hotkeys components? (HotKeys, GlobalHotKeys, IgnoreKeys etc) It happens in all the use cases.

Expected behavior It should detect that the key has been released.

Platform (please complete the following information): It happens with Chrome, Firefox, Safari...

Are you willing and able to create a PR request to fix this issue? No, because I found a workaround:

configure({
  ignoreEventsCondition: (e) => {
    // This is a hack to solve an issue in react-hotkeys.
    // Sometimes it thinks that a letter is still pressed.
    // It happens when you type shift+letter and it registers
    // the keydown event of the letter as upper case, but it
    // registers the keyup event as lower case. Since there's
    // no keyup event for the upper case letter it thinks
    // that it's still pressed
    return !e.altKey && !e.ctrlKey && !e.metaKey && e.shiftKey;
  },
});

Include the smallest log that includes your issue:

HotKeys (GLOBAL-E1๐Ÿ’š): New 'Shift' keydown event (that has NOT passed through React app). HotKeys (GLOBAL-C1โญ๏ธ): No matching actions found for 'Shift' keydown. HotKeys (GLOBAL-E2๐Ÿ’™): New (simulated) 'Shift' keypress event (that has NOT passed through React app). HotKeys (GLOBAL-E2๐Ÿ’™): Ignored 'Shift' keypress because it doesn't have any keypress handlers. HotKeys (GLOBAL-E3๐Ÿ’›): New 'E' keydown event (that has NOT passed through React app). HotKeys (GLOBAL-C1โญ๏ธ): No matching actions found for 'Shift+E' keydown. HotKeys (GLOBAL-E4๐Ÿ’œ): New 'E' keypress event (that has NOT passed through React app). HotKeys (GLOBAL-E4๐Ÿ’œ): Ignored 'Shift+E' keypress because it doesn't have any keypress handlers. HotKeys (GLOBAL-E5๐Ÿงก): New 'Shift' keyup event (that has NOT passed through React app). HotKeys (GLOBAL-E5๐Ÿงก): Ignored 'Shift+E' keyup because it doesn't have any keyup handlers. HotKeys (GLOBAL-E6โค๏ธ): New 'l' keydown event (that has NOT passed through React app). HotKeys (GLOBAL-C1โญ๏ธ): No matching actions found for 'E+l' keydown. HotKeys (GLOBAL-E7๐Ÿ’š): New 'l' keypress event (that has NOT passed through React app). HotKeys (GLOBAL-E7๐Ÿ’š): Ignored 'E+l' keypress because it doesn't have any keypress handlers. HotKeys (GLOBAL-E8๐Ÿ’™): New 'e' keyup event (that has NOT passed through React app).

What Configuration options are you using? It happens with the default config.

mikhuang commented 4 years ago

The workaround doesn't seem to work for scenarios in which one is trying to capture both 'command+z' and 'command+shift+z':

Log

HotKeys (GLOBAL-E21๐Ÿ’›): New 'Meta' keydown event (that has NOT passed through React app).
HotKeys (GLOBAL-E21๐Ÿ’›): Added 'Meta' to current combination: 'Meta'.
HotKeys (GLOBAL-E21๐Ÿ’›): Attempting to find action matching 'Meta' keydown . . .
HotKeys (GLOBAL-E21๐Ÿ’›-C0๐Ÿ”บ): No matching actions found for 'Meta' keydown.
HotKeys (GLOBAL-E22๐Ÿ’œ): New (simulated) 'Meta' keypress event (that has NOT passed through React app).
HotKeys (GLOBAL-E22๐Ÿ’œ): Ignored 'Meta' keypress because it doesn't have any keypress handlers.

HotKeys (GLOBAL-E23๐Ÿงก): New 'z' keydown event (that has NOT passed through React app).
HotKeys (GLOBAL-E23๐Ÿงก): Added 'z' to current combination: 'Meta+z'.
HotKeys (GLOBAL-E23๐Ÿงก): Attempting to find action matching 'Meta+z' keydown . . .
HotKeys (GLOBAL-E23๐Ÿงก-C0๐Ÿ”บ): Found action that matches 'Meta+z': UNDO. Calling handler . . .
HotKeys (GLOBAL-E23๐Ÿงก-C0๐Ÿ”บ): Stopping further event propagation.
HotKeys (GLOBAL-E23๐Ÿงก): Searching no further, as handler has been found (and called).

// z released

HotKeys (GLOBAL-E24โค๏ธ): New (simulated) 'z' keypress event (that has NOT passed through React app).
HotKeys (GLOBAL-E24โค๏ธ): Ignored 'Meta+z' keypress because it doesn't have any keypress handlers.

// shift pressed

HotKeys (GLOBAL-E25๐Ÿ’š): New 'Shift' keydown event (that has NOT passed through React app).
HotKeys (GLOBAL-E25๐Ÿ’š): Added 'Shift' to current combination: 'Meta+Shift+z'.
HotKeys (GLOBAL-E25๐Ÿ’š): Attempting to find action matching 'Meta+Shift+z' keydown . . .
HotKeys (GLOBAL-E25๐Ÿ’š-C0๐Ÿ”บ): Found action that matches 'Meta+Shift+z': REDO. Calling handler . . .

...
nopol10 commented 3 years ago

Are you guys still having this problem? I was having an issue with nothing working after pressing spacebar and had to refocus the element to restore hotkey functionalities. I was using the package from npm.

I then cloned this repo locally and built it to figure out the issue and realized that the version on github is newer than the one in npm and the issue I was having wasn't present in this one. Maybe this had already been fixed but wasn't published?

ivannovazzi commented 3 years ago

I am experiencing the same bug as well. I was experimenting with my very first combinations command+z (undo), command+shit+z(redo) and it resulted exactly is what @mikhuang reported above.