ref returned from useHotkeys does not work on conditionally rendered elements

[chernetsov0]

Is your feature request related to a problem? Please describe.
It took me a lot of frustration to realize that using ref returned from useHotkeys on conditionally rendered element which is initially absent results in weird (and possibly unintended) behavior:

• On initial render keydown event listener will be added on the document.
• When the element becomes present ref will update.
• Listener will still be on the document but behave like it is added on the element.

As a result all keydown events will be stopPropagationed and preventDefaulted when the focus is outside the element. Among other things, Tab navigation stops working, which is an accessibility concern.

Describe the solution you'd like
Some way to pass additional dependencies for useLayoutEffect inside the useHotkeys hook, e.g. through options object.

Describe alternatives you've considered

1. Passing dependencies for the useCallback to the useLayoutEffect as well.
2. Mentioning in the documentation, that ref from useHotkeys does not support conditionally rendered elements as it breaks accessibility and potentially other hotkeys. This can always be mitigated by wrapping conditionally rendered element in a component.

[AlexGalays]

yeah that ref in general doesn't work well. That bug above is pretty nasty as it locks out the whole page, forever.

Also If you hit the shortcut like CTRL+C from an unrelated element and shortly after do it again on the element with the ref, yoU get 2 function calls instead of one, even if the second keyboard keypress is CTRL alone. Mega buggy.

[WillGarman]

I ran into this as-well - was very annoying to figure out. But luckily I was able to just move the ref to the parent element, although some may be in a different position. That seemed to fix everything

The symptoms were that I had some other inputs on the page that I realized I couldn't type into on the initial render of the conditional element that had the ref attached to it. Clicking off the page after initial render and coming back fixed it. But made for a couple hour debugging session on what was wrong.

[zeorin]

Should be fixed by #1132

[JohannesKlauss]

Yes, this was released in 4.5.1 just now.