jaywcjlove / hotkeys-js

➷ A robust Javascript library for capturing keyboard input. It has no dependencies.
https://jaywcjlove.github.io/hotkeys-js
MIT License
6.61k stars 406 forks source link

binding detection does not work #426

Open artola opened 1 year ago

artola commented 1 year ago

Multiple keystrokes without release are not properly detected and therefore the shortcut is not fired.

See for example the following Codepen. Here I just try to trap and handle "Cmd+R", when it is not properly detected it is caught Chrome and produces a page reload.

The sequence is:

Use this debug page: https://cdpn.io/pen/debug/gOBvOXr?authentication_hash=ZoABapBwEZGr

The source of this repro: https://codepen.io/artola-the-decoder/pen/gOBvOXr

The expected behaviour is that after a non control key (I mean when a letter, number or symbol) is pressed, the logic should restart.

This sequence executed above: CMD + 0 + R, should be treated as CMD + 0 and CMD + R.

Here the same example refactored with mousetrap and it works as expected: https://codepen.io/artola-the-decoder/pen/zYmRxVB

magicdawn commented 1 year ago

I have a similar issue:

this breaks in v3.10.3, works as expected in v3.10.2

jaywcjlove commented 1 year ago

@magicdawn You can reproduce your error. https://codepen.io/jaywcjlove/pen/xxQdNQp?editors=0010

https://github.com/jaywcjlove/hotkeys-js/blob/8b8d7d968a836468b5ed09ed2abd76189cc5cdf4/src/index.js#L282

https://github.com/jaywcjlove/hotkeys-js/blob/8b8d7d968a836468b5ed09ed2abd76189cc5cdf4/src/index.js#L303

magicdawn commented 1 year ago

@jaywcjlove

Key sequence

  1. press command and hold.
  2. press left and release, expect you pressed command + left
  3. press right and release, expect you pressed command + right

v3.10.2 works as expected, v3.10.3 step 3 not showing

jaywcjlove commented 1 year ago

@magicdawn Upgrade v3.10.4

artola commented 1 year ago

@jaywcjlove It seems that the fix does not work for the above mentioned example, upgraded to v3.10.4:

https://codepen.io/artola-the-decoder/pen/gOBvOXr

jaywcjlove commented 1 year ago

@artola https://codepen.io/jaywcjlove/pen/NWEgNqo?editors=1010

import hotkeysJs from "https://cdn.skypack.dev/hotkeys-js@3.10.4";

window.addEventListener("DOMContentLoaded", (event) => {
  const button = document.querySelector('button');

  button.focus();

  hotkeys('command+r,command+r+0', undefined, (keyboardEvent, hotkeysEvent) => {
    keyboardEvent.preventDefault();
    keyboardEvent.stopPropagation();

    button.innerHTML = "prevented";

    return false;
  });
});
artola commented 1 year ago

This sequence executed above: CMD + 0 + R, should be treated as CMD + 0 and CMD + R.

Thanks @jaywcjlove. But look in my original issue, my expectation is:

This sequence executed above: CMD + 0 + R, should be treated as CMD + 0 and CMD + R.

If that is fulfilled, then the code should trap the keystrokes and avoid a page reload without changing the listeners, but it does not:

import hotkeysJs from "https://cdn.skypack.dev/hotkeys-js@3.10.4";

window.addEventListener("DOMContentLoaded", (event) => {
  const button = document.querySelector('button');

  button.focus();

  hotkeys('command+r', undefined, (keyboardEvent, hotkeysEvent) => {
    keyboardEvent.preventDefault();
    keyboardEvent.stopPropagation();

    button.innerHTML = "prevented";

    return false;
  });
});
jinxxxxxi commented 1 year ago

@jaywcjlove

Key sequence

  1. press command and hold.
  2. press left and release, expect you pressed command + left
  3. press right and release, expect you pressed command + right

v3.10.2 works as expected, v3.10.3 step 3 not showing

I have a similar problem: setup:[cmd+shift+k] and [cmd+shift+b] shortcuts

  1. press [cmd+shift] , and hold them
  2. press k, it worked.
  3. release k and press b, it doesn't work.

I think may be you have fixed problem about [cmd+] but not [cmd+shift+].