Global event handlers on document.body

[jdzijlstra]

Related to ##7094

We need to implement a global keyboard handler.
We currently have an onkeydown handler on our main-component, which fills the whole page.
However, by default, the tag has the focus and therefore our handler of our main-component does not see these key-events.

We were thinking about adding an onkeydown handler on document, but in this case we would have to add an handler for native events. We would however like to use a handler for React's Synthetic events.

Searching the web shows that many people have this same issue, but I did not find real solutions.

As far as I see, there are currently some solutions:

1. Add a handler to our main-component, and make sure this main-component gets the focus, instead of the tag. Problem here is that you need to make sure all the time, that the main-component gets focused.
2. Add a hander to document, that handles native events. However, there seem to be problems, when the stopPropagation() or preventDefault() is called on the native events in relation to React.

Is there already a good solution for this, or is there anything planned?

[gaearon]

Having a document-level native handler sounds like a solution. I don't understand your point about stopPropagation — if you call it, it means you want it not to reach the top, right?

Regardless, this doesn't look like a bug report — more like a support question or a feature request. We try to keep support outside of the repo, check these resources instead: https://reactjs.org/community/support.html. For the feature request, you can follow #285. (Nothing planned in short term though.)