Component blocks keyDown on other elements

[jzongker]

Do you want to request a feature or report a bug? Bug

What is the current behavior? After calling contenxtMenu.show() the component adds a handler for window.keyDown in order to add keyboard navigation and calls e.preventDefault() within that so that no other controls on the page receive this input. This is never released so once a menu is showed keyDown events on other page elements are permanently disabled.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

Add an input type="text" to the page and an onchange event to it.

I've worked around this by calling show like this so that it immediately cancels the window.keydown event handler that's added. Of course this also disables keyboard navigation in the menu:

contextMenu.show(e);
window.addEventListener('keydown', function (event) { event.stopPropagation(); }, true);

What is the expected behavior? When the context menu goes away, release the window.keyDown handler.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 17/Chrome/Windows