avocode / react-shortcuts

Manage keyboard shortcuts from one place
https://codesandbox.io/s/l40jjo48nl
MIT License
328 stars 37 forks source link

Users have to click page before shortcuts can work #60

Open noahmanger opened 6 years ago

noahmanger commented 6 years ago

I'm trying to set up a global shortcut manager that wraps my entire app in order to have shortcuts that navigate to different routes (i.e. hitting c takes you to the compose message view). Is it the intended behavior that the user needs to click somewhere on the page before the shortcuts can fire? Or am I doing something wrong?

jacqt commented 6 years ago

Perhaps this may be useful to other people, but I have found that using targetNodeSelector="body" will fix this problem.

jfrux commented 6 years ago

Don't you generally have to make sure the app is focused before shortcuts work in general? Seems like this isn't really anything unexpected? Browsers need that context before input should be listened for. Would be kind of a nightmare otherwise... maybe I'm missing the point of this issue.

noahmanger commented 6 years ago

@joshuairl , right, you always need the browser app itself is in focus, but if you take Github for example, you don't need to actually click on any part of the DOM for keyboard shortcuts to work.

I'll give targetNodeSelector="body" a try. Thanks!

Soreine commented 4 years ago

I'm using mousetrap which binds listeners to the document element by default, and I have noticed that these event listeners will be invoked before the onKeyDown handlers of my React components lower in the tree. So I can't stop the propagation of an event from a child component onKeyDown, it will always be handled first by mousetrap at the document level.

I suspect that doing targetNodeSelector="body" leads to the same kind of problems.