In the website I'm currently developing, native events (regular KeyboardEvents) produce unwanted behaviour (using old versions of state and refs), whilst SyntheticEvents (which I believe are React.KeyboardEvents) work flawlessly. I'm trying to put a SyntheticEvent onKeyDown listener on the document (so that the keypress can be handled no matter where the focus is), is there any way to achieve this? To work around this, I've made a wrapper element across the whole app with a onKeyDown listener, this does not work well though, because it does not register all the presses (such as when a hamburger menu or a full screen photo is focused, which I think happens due to their absolute/fixed positioning).

Example of using document.addEventListener("keydown", handleKeyDown), which fires native element, but has incorrect behaviour (handleKeyDown uses outdated refs), but registers keypresses globally:

• Stack Trace:
• Event Type:

Example of using app wrapper in which handleKeyDown works correctly (the refs are current), probably because it is a SyntheticEvent. It does not register clicks globally though:

• Stack Trace:
• Event Type: