🐛 Fix #187: Add root prop to HotKeys to allow root HotKeys components… #188
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… to capture all events
greena13
commented
Jun 2, 2019
README.md
Outdated
| @@ -1220,6 +1227,16 @@ Also make sure your React application is not calling `stopPropagation()` on the | |||
|
|
|||
| Finally, make sure your key event are not coming from one of the [tags ignored by react-hotkeys](#Ignoring-events). | |||
|
|
|||
| #### React Hotkeys thinks I'm holding down a key I've released | |||
|
|
|||
| This can happen when you have an action handler that either unmounts the `<HotKeys>` component, or focuses an area of the application where there is no parent `<HotKeys>`. The solution to this is to add a `<HotKeys root>` to the top of your application that renders it as children - or at least high enough to *not* be unmounted or unfocused by your action handler. | |||
There was a problem hiding this comment.
✅ Change parent to ancestor
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Context
A recent pull request (#186) switched from observing key combination submatches, to ignoring them by default. This revealed there is an issue (#187) with key events being missed by React HotKeys in circumstances where an action is defined with a handler that changes the React DOM or focused element in such a way that the new focused element is outside of any
<HotKeys />descendants, resulting in the correspondingkeyupevent never being logged - andreact-hotkeysbehaving as if the key is still held down.A simple fix for this, is to place a
<HotKeys />component at the top of the react application, so no matter what new content is rendered or what element is focused, it would still be within the descendants of a<HotKeys />component. However, onereact-hotkeys' optimisations is that unless a<HotKeys />component defines akeyMapprop, it's not actually added to the list of components listening out for key events. This means a user would have to define akeyMapprop of some value (say an empty object), just to get the desired behaviour.This pull request
Adds a
rootprop to the<HotKeys />component, so a user can add such a root<HotKeys />component, without resorting to a hack to circumvent the intended optimisations in place.