[BUG] typing a space in <input /> will disable all hotkeys in that <input />

[ZYinMD]

Describe the bug If you set up some hotkeys to work inside a textarea or input, it'll work, but after you type a space, they stop working.

Demo: CodeSandbox

How are you using react hotkeys components? (HotKeys, GlobalHotKeys, IgnoreKeys etc) HotKeys

Platform (please complete the following information):

• Version of react-hotkeys 2.0.0
• Browser [e.g. chrome, safari] Chrome
• OS: [e.g. iOS] Window, Mac, CodeSandbox

Are you willing and able to create a PR request to fix this issue? Sorry I don't know enough to contribute.

Include the smallest log that includes your issue:

HotKeys (F0📕-E1💚-C0🔺) No matching actions found for ' ' keydown.
index.js:27 HotKeys (F0📕-E3💛-C1⭐️-P0🔺:) New (simulated) ' ' keypress event.
index.js:27 HotKeys (F0📕-E3💛-C1⭐️-P0🔺:) Key history: [
    {
        "keys": {
            " ": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    2,
                    0
                ]
            ]
        },
        "ids": [
            " "
        ],
        "keyAliases": {}
    }
].
index.js:27 HotKeys (F0📕-E3💛-C1⭐️-P0🔺:) Ignored ' ' keypress because it doesn't have any keypress handlers.
index.js:27 HotKeys (F0📕-E3💛-C1⭐️-P0🔺:) Ignored ' ' keypress as it was not expected, and has already been simulated.
index.js:27 HotKeys (F0📕-E3💛-Cnull🔺) Stopping further event propagation.

What Configuration options are you using?

configure({
  ignoreTags: [],
  logLevel: 'verbose'
})

[Krknv]

Same issue. Trying to toggle cursor with space:

<HotKeys
  keyMap={{
    GRAB_CURSOR: { sequence: 'space', action: 'keydown' },
    DEFAULT_CURSOR: { sequence: 'space', action: 'keyup' },
  }}
/>

[Krknv]

Fix for my case - defining custom key code:

configure({
  customKeyCodes: {
    32: 'SPACE_BAR',
  },
});

<HotKeys
  keyMap={{
    GRAB_CURSOR: { sequence: 'SPACE_BAR', action: 'keydown' },
    DEFAULT_CURSOR: { sequence: 'SPACE_BAR', action: 'keyup' },
  }}
/>

[greena13]

Thanks for the issue @ZYinMD, this is an interesting one.

Thanks for the workaround, @Krknv.

I'm a little confused by you saying your application produces no logs, @ZYinMD. Are you looking in the developer console in your browser? These would be a helpful starting point if you can get them and share.

[ZYinMD]

Hi @greena13, yes I was talking about log in the console. You could open my CodeSandbox demo to watch the console as the bug reproduces. (There are 2 places to see the console logs in CodeSandbox, one is their emulated console, the other is your Chrome. Please check both)

[ZYinMD]

Sorry last time I thought I turned on verbose, but I didn't.... and here's part of the verbose log:

This bug and the verbose log is reproduced at this CodeSandbox.

HotKeys (F0📕-E1💚-C0🔺) No matching actions found for ' ' keydown.
index.js:27 HotKeys (F0📕-E3💛-C1⭐️-P0🔺:) New (simulated) ' ' keypress event.
index.js:27 HotKeys (F0📕-E3💛-C1⭐️-P0🔺:) Key history: [
    {
        "keys": {
            " ": [
                [
                    1,
                    0,
                    0
                ],
                [
                    1,
                    2,
                    0
                ]
            ]
        },
        "ids": [
            " "
        ],
        "keyAliases": {}
    }
].
index.js:27 HotKeys (F0📕-E3💛-C1⭐️-P0🔺:) Ignored ' ' keypress because it doesn't have any keypress handlers.
index.js:27 HotKeys (F0📕-E3💛-C1⭐️-P0🔺:) Ignored ' ' keypress as it was not expected, and has already been simulated.
index.js:27 HotKeys (F0📕-E3💛-Cnull🔺) Stopping further event propagation.

[bassadev]

Same issue. The reason why hotkeys do not work in this case is that after pressing a whitespace character (space, enter,..) in one of the per default ignored elements (input, textarea...), this whitespace character is included in the combination for all further hotkeys.

No matching actions found for ' +Control' keydown

If I ignore those characters, everything works fine:

configure({
    ignoreEventsCondition: keyEvent => {       
        if (keyEvent.key === ' ') {
            return true; 
        }
        return false;
    }
});

I hope this helps.

[rmatesic]

@bassadev This seems to still be an issue.

I have noticed that once 'space' is detected the verbose logs just STOP until I unfocus and refocus on my text area.

The image below is what the logs look like after I press space and all further events stop.