Global true not working when focus is on the input.

[dholakiyaankit]

 <HotKeys handlers=
                {
                    {
                        //Declare short cut keys 
                        'ctrl+alt+p': (e) => this.BindKeyBoardEvents(e, Constants.Properties),                    
                    }
                } focused={true} attach={window} global={true} >

I have global filter inside this I have dynamic inputs, based on the user's selection its creating the textboxes in the UI, HotKeys works in all scenarios except when input is in focus

<input name={record.uniqueId} type={record.Type.toLowerCase()} onKeyDown={(e)=>this.UpdateElementStateValue(e)}
                                onChange={(e) => this.PropertyChange(record, e)} className="form-control" value={record.RuntimeValue} />

Here's my input when I am in focus of that the short keys not working.

Can you please let me know what I am doing wrong?

[greena13]

Hey @dholakiyaankit, I'm sorry to hear you're having issues.

There is currently no global prop (but there will be one to replace focused={true} attach={window} in the next major version of react-hotkeys if all works out).

I am not exactly sure what could be the cause of your issue from your description, but I strongly suspect that it's because of the onKeyDown and onChange on your input. My theory is that because React is handling these events through its synthetic event system, they are not allowed to escape or make their way out of React and to window (I confess, I don't actually know if React captures these events or re-propagates them to the parent of the DOM element React is bound to).

Can you please try temporarily removing them and seeing if the global shortcuts are still not being triggered when you press the matching key combination?

[dholakiyaankit]

@greena13 thanks for your prompt reply, in-fact its not working by removing those events from input too.
I tried changing many things as I am using attach:window which should apply to whole window, and current focused element is inside the window too.

I don't know what's going wrong with this code. is there any way left to check?

[greena13]

I've just remembered that there is some implicit behaviour that kicks in when Moustrap is bound to the window: it ignores keyboard events from inputs and a few others:

    Mousetrap.prototype.stopCallback = function(e, element) {
        var self = this;

        // if the element has the class "mousetrap" then no need to stop
        if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
            return false;
        }

        if (_belongsTo(element, self.target)) {
            return false;
        }

        // stop for input, select, and textarea
        return element.tagName == 'INPUT' || element.tagName == 'SELECT' || element.tagName == 'TEXTAREA' || element.isContentEditable;
    };

To override this behaviour, you'll currently need to reach into the internals of HotKeys by placing a ref to it and accessing the private attribute __mousetrap__:

componentDidMount(){
    const mousetrap = this.hotKeys.__mousetrap__;

    mousetrap.__proto__.stopCallback = (e, element) => {
      // Your custom logic here to replace the above function
    };
  }

render() {
    return (
      <div >
        <HotKeys
          ref={ (c) => this.hotKeys = c }
          >
          { children }
        </HotKeys>
    );
  }

Please note, I believe this function is used globally (you're overriding mousetrap's prototype method) - so it will affect your entire application.

There will be a nicer way of doing this in the next major version of react-hotkeys (which doesn't use Mousetrap at all), but for now, this is all you have unfortunately.

I'm going to close this issue for now, but let me know if you need anything further to get it working and I'll do my best to help.

[dholakiyaankit]

That's working like a charm, thanks!