[BUG] Switching to colemak causes multiple keystrokes to be registered.

[pashashocky]

Describe the bug
Multiple keystrokes registered with colemak layout:

To Reproduce

1. Switch to "Colemak" layout
2. Hit d key on qwerty which is s on colemak.

Please try and add a codesandbox or stackblitz to reproduce the bug:

import "./App.css";
import React from "react";
import { useHotkeys } from "react-hotkeys-hook";

function App() {
  const [countS, setCountS] = React.useState(0);
  const [countD, setCountD] = React.useState(0);

  useHotkeys("s", () => setCountS((count) => count + 1));
  useHotkeys("d", () => setCountD((count) => count + 1));

  return (
    <>
      <h1>Pressed 's' key {countS} times.</h1>
      <h1>Pressed 'd' key {countD} times.</h1>
    </>
  );
}

export default App;

Expected behavior
Single key press should register single keystroke

Screenshots
Dropover Video

[TristanH]

We're seeing this issue too in our app!

[JohannesKlauss]

Yes, this is related to this issue. I am working on a version 5 that only listens to the produced key. But I am super busy right now, so this might take some time.

[JohannesKlauss]

This is a layout specific problem that gets addressed in version 5.

This has been fixed in pre release 5.0.0-1. Please try out this version.
To listen to d no matter the layout useHotkeys('d', callback, {useKey: true})

Please let me know if that fixes your issue.

[matiastucci]

@JohannesKlauss I tried { useKey: true } but I still see an issue:

In Dvorak layout if I press h 1 time I'm seeing the d callback firing too. So, in this example if I press h (on dvorak) I'm seeing both counts increase.

function Test() {
  const [countH, setCountH] = React.useState(0);
  const [countD, setCountD] = React.useState(0);

  hotkeys.useHotkeys('d', () => setCountD((count) => count + 1), { useKey: true });
  // In dvorak pressing the 'h' key is the same as pressing the 'd' key in qwerty
  hotkeys.useHotkeys('h', () => setCountH((count) => count + 1), { useKey: true });

  return (
      <>
        <h1>Pressed D key {countD} times.</h1>
        <h1>Pressed H key {countH} times.</h1>
      </>
  );
}

[JohannesKlauss]

That is weird. If you log the event, what is the produced key?

[matiastucci]

Both events have the same: key: "d" and keyCode: 68

[JohannesKlauss]

Hmh... but in general the Keys work correct (in a textinput for example?)

[matiastucci]

yeah, that works fine. The issue is seeing 2 events fired when pressing only 1 key.

In my app I have actions associated with h and d and on Dvorak when pressing h the 2 actions (d too) are firing instead of only 1.

[JohannesKlauss]

What happens if you add a third one with the following and hit d:

useHotkeys('*', e => console.log(e))

Can you show me the logs?

[matiastucci]

Yeah, no problem. I did and when pressing d on Dvorak I get: { key: "e", charCode: 0, keyCode: 69 }.