react-shortcuts icon indicating copy to clipboard operation
react-shortcuts copied to clipboard

Users have to click page before shortcuts can work

Open noahmanger opened this issue 7 years ago • 4 comments

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?

noahmanger avatar Jan 08 '18 22:01 noahmanger

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

jacqt avatar Apr 11 '18 06:04 jacqt

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.

jfrux avatar May 02 '18 11:05 jfrux

@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!

noahmanger avatar May 02 '18 14:05 noahmanger

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.

Soreine avatar Sep 17 '20 14:09 Soreine