Event Propagation Problems

[Aryk]

I'm having some trouble preventing the actions from happening in input fields. According to mousetraps' website, there is a default function in mousetrap that will ignore commands if it's coming from an input field.

However, with React-Hotkeys, not only are the events bubbling out of the input fields, I can't seem to find a way to control which keys I want to escape.

Has anyone else had issues like this. I'm using the latest version of react-hotkeys. Maybe someone knows atleast which event I can listen for on the input field to stop propagation.

Right now, they hotkey events at the top container seem to handling the events first.

I'm guessing I'll have to use something like this: https://github.com/erikras/react-native-listener....

[DJTB]

This won't really help you to whitelist/blacklist keys, but if you just want to pass through key events that occur in inputs you can check the event.target.nodeName in your handler and return the event instead of any handling.

It's not ideal, but it's an interim solution until there's a proper react-hotkeys config for it.

const handlers = {
  someHandler: (event) => (
    ['INPUT', 'TEXTAREA'].includes(event.target.nodeName) ? 
      event :
      dispatchAction()
  ),
};

Or you can wrap handlers for re-use

const ignoreInputFields = (handler) => (event) => ( 
  ['INPUT', 'TEXTAREA'].includes(event.target.nodeName) ? 
    () => event : 
    handler(event)
);

const handlers = {
  someHandler: ignoreInputFields((event) => handleEventSomehow || dispatchAction()),
};

[Aryk]

thanks @DJTB will take a look!

[majg0]

@DJTB any progress?

[DJTB]

@martingronlund Progress with what? I haven't contributed to this project, but I've shown a way to pass through events, or dispatch an action in react-hotkeys. You can choose.

[majg0]

@DJTB sorry, just assumed you were a maintainer!

[RustyDev]

Any update on this? Inputs and textareas are triggering hotkeys for me.

[greena13]

@RustyDev, I believe this issue has bee resolved in the next major release, which will remove Mousestrap entirely, but unfortunately that is looking like it will still be a couple of months away before I have the time to release a stable version.

In the meantime, this workaround should help you fix your problem.

[augbog]

@greena13 just curious what is react-hotkeys planning to move to in place of Mousetrap? Is there an issue tracking that work?

[greena13]

Hey @augbog, I tried a couple of things to move away from the no-longer-maintained mousetrap, but I had the most success with an implementation using only React's synthetic events. This seemed to offer quite a bit of promise, but I got stuck on how to provide global shortcuts (when the React app is not in focus) in a reliable, cross-browser fashion, before I got temporarily pulled away onto other things.

(My current thinking is to give the mousetrap successor, combokeys a go, for only the global shortcuts and continue to use React's synthetic events when the React application is in focus.)

The dev_replace_mousetrap branch contains my progress. There is no one issue that tracks this - it does resolve almost all of the old outstanding issues, though. I can see a case for one, but I have been a little hesitant to publicly commit to such a large refactor until I am quite sure that it can meet the needs of package.

[augbog]

Ah I see thanks a lot! That brings a lot of clarity :) Really appreciate all the hard work on this!

[greena13]

This should be addressed by the new features to ignore events in v2.0.0-pre1 when it's released, soon.