Hotkeys bound to window/outer-element about react-hotkeys HOT 10 CLOSED

@cpsubrian I've just release v0.4.0 on npm with a new attach property which optionally takes a DOM Element which will listen to key events.

For your use case you'll need both of the new props.

<HotKeys focused={true} attach={window} {...otherProps} />

Let know if you have any issues with this and we can reopen! :)

from react-hotkeys.

One little edge case is if you have multiple <HotKeys> attaching to window, they always fire together.

An example: You bind Esc to window to navigate up a level in your app. A modal appears which also binds to Esc to dismiss the modal. Hitting Esc dismisses the modal and navigates you up the app at once. You’d expect the inner-most nested <HotKey> would only fire; in this case, just the modal <HotKey>.

from react-hotkeys.

Hey @cpsubrian thanks for bringing this up. It was something I have thought about myself and I have two solutions.

1. I solution could simply implement now with few worries is to have a focused prop which overrides the internal __isFocused__ state which would enable you just to say your root HotKeys component is always focused and allows people to manually manage focus state if that prop is present.
2. The root HotKeys component could be made to always be an active handler. We'd just check to see if we have (known internally) a "hotkey parent" and if one doesn't exist your hotkeys can always be honoured.

from react-hotkeys.

Realised just as I hit "comment" that these could live side by side quite easily. So for now I'll implement soluton 1.

from react-hotkeys.

Great ideas. Please let me know if I can help with testing/coding either of those solutions. If you don't have much time right now I could dive into the source deeper and see if I can grok your #1 above enough to try my hand at a PR

from react-hotkeys.

Would be great if you could download and test out latest master. :)

You can control focus using the focused prop as of 6e677b1

from react-hotkeys.

My build-chain (webpack, babel-loader) is having issues with master. Will dive in more when I get a chance. It appears to be the export {default as blah} from 'thing' that is the problem.

ERROR in ./~/react-hotkeys/lib/index.js
Module parse failed: /Users/cpsubrian/projects/personal/zelda/node_modules/react-hotkeys/lib/index.js Line 1: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| export {default as HotKeys} from './HotKeys';
| export {default as FocusTrap} from './FocusTrap';
| export {default as HotKeyMapMixin} from './HotKeyMapMixin';
 @ ./src/components/handlers/AppHandler.js 25:20-44

from react-hotkeys.

Interesting. Seems valid and babel should handle it: https://babeljs.io/repl/#?experimental=true&evaluate=true&loose=false&spec=false&code=export%20%7Bdefault%20as%20HotKeys%7D%20from%20'.%2FHotKeys'%3B

I've tested and realised that the focused addition won't actually solve the problem. Basically because your root component (or rather, the rendered dom element) probably won't receive any keyboard events.

Solution should probably be a pretty special root prop which when true will listen to events on the window (ie. catch all) rather than any element.

Will hopefully work on this tonight when I get chance.

from react-hotkeys.

Just confirming the fix worked like a charm.

from react-hotkeys.

Just checking since this was closed long ago, is there now support for the case mentioned by @pistachiomatt? I have the same use case.

from react-hotkeys.