HotKeys not working for form fields/inputs

[Fleuv]

Describe the bug
When adding HotKeys to an input it seems not to be added.

**How are you using react hotkeys components?
HotKeys, GlobalHotKeys

Expected behavior
The HotKey handler is triggered even when the input is in focus.

Platform:

• Version of react-hotkeys: 2.0.0-pre3
• Browser: firefox
• OS: ubuntu

Are you willing and able to create a PR request to fix this issue?
No, sorry.

**APPLICABLE TO v2.0.0-pre1 AND ABOVE: ** yes

Include the smallest log that includes your issue:

HotKeys (GLOBAL-E19💚): Started a new combination with 'Enter'. GlobalKeyEventStrategy.js:448
HotKeys (GLOBAL-E19💚): Key history: [
    {
        "keys": {
            "Enter": [
                [
                    true,
                    true,
                    false
                ],
                [
                    true,
                    true,
                    true
                ]
            ]
        },
        "ids": [
            "Enter"
        ],
        "keyAliases": {}
    },
    {
        "keys": {
            "Enter": [
                [
                    false,
                    false,
                    false
                ],
                [
                    true,
                    false,
                    false
                ]
            ]
        },
        "ids": [
            "Enter"
        ],
        "keyAliases": {}
    }
]. GlobalKeyEventStrategy.js:449
HotKeys (GLOBAL-E20💙): New 'Enter' keydown event (that has NOT passed through React app). GlobalKeyEventStrategy.js:321
HotKeys (GLOBAL-E20💙): Ignored 'Enter' keydown event because ignoreEventsFilter rejected it. GlobalKeyEventStrategy.js:325
HotKeys (GLOBAL-E20💙): Key history: [
    {
        "keys": {
            "Enter": [
                [
                    true,
                    true,
                    false
                ],
                [
                    true,
                    true,
                    true
                ]
            ]
        },
        "ids": [
            "Enter"
        ],
        "keyAliases": {}
    },
    {
        "keys": {
            "Enter": [
                [
                    true,
                    false,
                    false
                ],
                [
                    true,
                    true,
                    false
                ]
            ]
        },
        "ids": [
            "Enter"
        ],
        "keyAliases": {}
    }
]. GlobalKeyEventStrategy.js:460
HotKeys (GLOBAL-E21💛): New 'Enter' keypress event (that has NOT passed through React app). GlobalKeyEventStrategy.js:386
HotKeys (GLOBAL-E21💛): Ignored 'Enter' keypress event because ignoreEventsFilter rejected it. GlobalKeyEventStrategy.js:390
HotKeys (GLOBAL-E21💛): Key history: [
    {
        "keys": {
            "Enter": [
                [
                    true,
                    true,
                    false
                ],
                [
                    true,
                    true,
                    true
                ]
            ]
        },
        "ids": [
            "Enter"
        ],
        "keyAliases": {}
    },
    {
        "keys": {
            "Enter": [
                [
                    true,
                    true,
                    false
                ],
                [
                    true,
                    true,
                    true
                ]
            ]
        },
        "ids": [
            "Enter"
        ],
        "keyAliases": {}
    }
]. GlobalKeyEventStrategy.js:460
HotKeys (GLOBAL-E22💜): New 'Enter' keyup event (that has NOT passed through React app). GlobalKeyEventStrategy.js:432
HotKeys (GLOBAL-E22💜): Ignored 'Enter' keyup event because ignoreEventsFilter rejected it. GlobalKeyEventStrategy.js:436

Code to reproduce

Field.jsx

import React, {Component} from 'react';
import {HotKeys} from 'react-hotkeys';

class Field extends Component {
	render() {
		return <HotKeys
			keyMap={{update: 'enter'}}
			handlers={{update: 'handleUpdate'}}
			component={(<input />)}
		/>;
	}

	//...
}

export default Field;

App.jsx

import React, {Component} from 'react';
import {GlobalHotKeys} from 'react-hotkeys';
import Field from './Field';

class App extends Component {
	render() {
		const Container = ({children}) => children;
		return <Container><GlobalHotKeys ... /><Field /></Container>
	}
}

[greena13]

Hey Fleuv, if this is your expectation, then it looks like you need to specify your own ignoreEventsCondition:

import {configure} from 'react-hotkeys';

configure({
  ignoreEventsCondition: (event) => { return false; }
});

[Fleuv]

Hi greena13, Thank you for your quick reply. Although ignoreEventsCondition is very useful in most cases, it is unfortunately not in my particular use case. My use case is as following: I use a GlobalHotKeys component with a keyMap like { someOtherActionThenUpdate: 'enter' }. Next to that I have a local HotKeys component what only works for e.g. the input element as in the example I posted. When I implement ignoreEventsCondition anywhere (it doesn't seem to matter where, because it's a global configuration) then the handler for the GlobalHotKeys is also executed when focussing on the HotKeys's component (the input element).

A perfect solution for this would be, to be capable to add a similar configuration as ignoreEventsCondition to a specific HotKeys component. Because as of now I'm unable to target and set a condition for the GlobalHotKeys and HotKeys component separately.

[greena13]

Ah, it seems I was too quick to jump to a conclusion. I'll re-open and take a closer look at your issue.

[Fleuv]

Great thank you!

Also a little side-note which might be a little off-topic tho.

When you have for example a GlobalHotKey with a binding for enter but you focus on the HotKey component with a keyMap binding for ctrl+enter than it will still execute the enter handler from the GlobalHotKey component. However it seems to be able to distinguish such bindings (e.g. enter from shift+enter and vice-versa) when it's all in the same component or at least, I can confirm for that GlobalHotKey.

[greena13]

This should be resolved in v2.0.0-pre4. I've tested on the example app and added a few tests to the test suite, and all appears to be well.

Please let me know if this is not the case and I'll re-open.

[greena13]

When you have for example a GlobalHotKey with a binding for enter but you focus on the HotKey component with a keyMap binding for ctrl+enter than it will still execute the enter handler from the GlobalHotKey component. However it seems to be able to distinguish such bindings (e.g. enter from shift+enter and vice-versa) when it's all in the same component or at least, I can confirm for that GlobalHotKey.

Could you please also test this is still the case and open a separate issue if it still represents a problem for you?