<p dir="auto">In my example app / root component is rendered into <code class="notranslate">document.body</code> it also set's up <code class="notranslate">onKeyDown</code> <code class="notranslate">onKeyUp</code> to handle application keyboard shortcuts.</p>
<p dir="auto">The problem I'm running into is that some user interaction like clicking around page causes <code class="notranslate">document.body</code> to obtain focus (to become <code class="notranslate">document.activeElement</code>) and in that case <code class="notranslate">onKeyDown</code> &amp; <code class="notranslate">onKeyUp</code> event handlers are no longer invoked.</p>
<p dir="auto">I know I could register "keydown", "keyup" event handlers manually once app component is mounted but I would prefer to stay with-in react.</p>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="18377740" data-permission-text="Title is private" data-url="https://github.com/facebook/react/issues/284" data-hovercard-type="issue" data-hovercard-url="/facebook/react/issues/284/hovercard" href="https://github.com/facebook/react/issues/284">#284</a> reminded me that one thing I've sometimes wanted is to install a handler on window for <code class="notranslate">keypress</code> (for keyboard shortcuts) or <code class="notranslate">scroll</code>. Right now I can just do <code class="notranslate">window.addEventListener</code> in <code class="notranslate">componentDidMount</code> but since React is listening already, it would be nice if there were some way for me to intercept those events. (In addition, receiving normalized synthetic events is generally more useful.)</p>