[BUG] Attaching resulting ref to a different element stops the shortcuts/hotkeys from working

[vilemj-Viclick]

Describe the bug

If you attach the result of the hook useHotkeys to a different element than it was initially attached to, it breaks.

To Reproduce

Steps to reproduce the behavior:

1. Have code of the sorts const ref = useHotkeys(...); in your component.
2. Use the ref like this initially: <element1 ref={ref} />
3. Then based on a condition of some sort use the ref like this: <element2 ref={ref} />
4. The shortcuts stop working

I made a CodePen to illustrate this better.

Here's the gist of the demo:

It renders either or based on a button toggle. Supposedly a situation where you toggle between a multi-line and simple input situation. But it's purely an example.</p> <p>When focus is inside any of the input tags (input or textarea) pressing Enter increments a counter. The value of the counter is rendered as well.</p> <p>After you use the Toggle button (be it once or multiple times) the Enter key no longer increments the counter.</p> <h2>Expected behavior</h2> <p>When the ref is attached to a different instance the eventHandler should re-attach. => Call <code>addEventHandler</code> on the new instance. Of-course after clearing the old one. The old instance can stay in the DOM after all, though it does not in my example.</p> <h2>Environment:</h2> <ul> <li>Desktop</li> <li>OS: All (I am on Mac OS Sonoma)</li> <li>Browser: All (I use Vivaldi)</li> <li>Browser version: All (6.5.3206.50 (Stable channel) (arm64))</li> <li>Package version: 4.4.3</li> </ul> <h2>Additional context</h2> <h3>How to fix:</h3> <p>To fix this, the returned Ref will need to be a <code>RefCallback<T></code> instead of <code>MutableRefObject<T></code>. By passing a RefCallback, your callback will be called by React every time the instance it's attached to changes.</p> <p>I can and may submit a Pull-Request with a fix.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/JohannesKlauss"><img src="https://avatars.githubusercontent.com/u/6214415?v=4" />JohannesKlauss</a> commented <strong> 9 months ago</strong> </div> <div class="markdown-body"> <p>Changing the return type does not change the behavior of the code. Typescript ist not present during runtime.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/chekrd"><img src="https://avatars.githubusercontent.com/u/25004106?v=4" />chekrd</a> commented <strong> 9 months ago</strong> </div> <div class="markdown-body"> <p>@JohannesKlauss I am sure he uses TS to describe the desired JS implementation as TS is a great tool for this.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/vilemj-Viclick"><img src="https://avatars.githubusercontent.com/u/13902120?v=4" />vilemj-Viclick</a> commented <strong> 9 months ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Changing the return type does not change the behavior of the code. Typescript ist not present during runtime.</p> </blockquote> <p>It sure does not. But by using a callback, your code can actually react (haha... 😄) to a change in the element to which the ref is attached to.</p> <p>I already have working code including a test failing without my changes. I hope it will all make sense when presented with my suggestions.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/vilemj-Viclick"><img src="https://avatars.githubusercontent.com/u/13902120?v=4" />vilemj-Viclick</a> commented <strong> 9 months ago</strong> </div> <div class="markdown-body"> <p>Here's the PullRequest: #1117 </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/JohannesKlauss"><img src="https://avatars.githubusercontent.com/u/6214415?v=4" />JohannesKlauss</a> commented <strong> 8 months ago</strong> </div> <div class="markdown-body"> <p>Thank you for work, I'll have a look into it!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/zeorin"><img src="https://avatars.githubusercontent.com/u/1187078?v=4" />zeorin</a> commented <strong> 8 months ago</strong> </div> <div class="markdown-body"> <p>I have a simpler implementation here: <a href="https://github.com/JohannesKlauss/react-hotkeys-hook/pull/1132">https://github.com/JohannesKlauss/react-hotkeys-hook/pull/1132</a></p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>