Fix behavior of useHotkey when returned ref is re-attached to a diferent element.

src/types.ts

@@ -43,3 +43,5 @@ export type Options = {
 }
 
 export type OptionsOrDependencyArray = Options | DependencyList
+
+export type KeyboardEventHandler = (event: KeyboardEvent) => any

src/useHotkeys.ts

@@ -1,5 +1,5 @@
-import { HotkeyCallback, Keys, Options, OptionsOrDependencyArray, RefType } from './types'
-import { DependencyList, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
+import { HotkeyCallback, KeyboardEventHandler, Keys, Options, OptionsOrDependencyArray, RefType } from './types'
+import { DependencyList, RefCallback, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
 import { mapKey, parseHotkey, parseKeysHookInput } from './parseHotkeys'
 import {
   isHotkeyEnabled,
@@ -31,6 +31,11 @@ export default function useHotkeys<T extends HTMLElement>(
   const ref = useRef<RefType<T>>(null)
   const hasTriggeredRef = useRef(false)
 
+  const handleKeyUpRef = useRef<KeyboardEventHandler>()
+  const handleKeyDownRef = useRef<KeyboardEventHandler>()
+  const stableHandleKeyUpRef = useRef<KeyboardEventHandler>((...args) => handleKeyUpRef.current?.(...args))
+  const stableHandleKeyDownRef = useRef<KeyboardEventHandler>((...args) => handleKeyDownRef.current?.(...args))
+
   const _options: Options | undefined = !(options instanceof Array)
     ? (options as Options)
     : !(dependencies instanceof Array)
@@ -140,12 +145,8 @@ export default function useHotkeys<T extends HTMLElement>(
       }
     }
 
-    const domNode = ref.current || _options?.document || document
-
-    // @ts-ignore
-    domNode.addEventListener('keyup', handleKeyUp)
-    // @ts-ignore
-    domNode.addEventListener('keydown', handleKeyDown)
+    handleKeyUpRef.current = handleKeyUp
+    handleKeyDownRef.current = handleKeyDown
 
     if (proxy) {
       parseKeysHookInput(_keys, memoisedOptions?.splitKey).forEach((key) =>
@@ -154,10 +155,8 @@ export default function useHotkeys<T extends HTMLElement>(
     }
 
     return () => {
-      // @ts-ignore
-      domNode.removeEventListener('keyup', handleKeyUp)
-      // @ts-ignore
-      domNode.removeEventListener('keydown', handleKeyDown)
+      handleKeyUpRef.current = undefined
+      handleKeyDownRef.current = undefined
 
       if (proxy) {
         parseKeysHookInput(_keys, memoisedOptions?.splitKey).forEach((key) =>
@@ -167,5 +166,34 @@ export default function useHotkeys<T extends HTMLElement>(
     }
   }, [_keys, memoisedOptions, enabledScopes])
 
-  return ref
+  useEffect(() => {
+    // This effect is needed to attach event listeners to something when the returned ref is not used.
+    // and to clean up when the component using the hook unmounts.
+    const domNode = (ref.current || memoisedOptions?.document || document) as T
+
+    domNode?.addEventListener('keyup', stableHandleKeyUpRef.current)
+    domNode?.addEventListener('keydown', stableHandleKeyDownRef.current)
+
+    return () => {
+      ref.current?.removeEventListener('keyup', stableHandleKeyUpRef.current)
+      ref.current?.removeEventListener('keydown', stableHandleKeyDownRef.current)
+    }
+  }, [memoisedOptions?.document])
+
+  const refCallback: RefCallback<T> = useCallback((element) => {
+    const domNode = (element || memoisedOptions?.document || document) as T
+
+    // Cleanup old event handlers
+    ref.current?.removeEventListener('keyup', stableHandleKeyUpRef.current)
+    ref.current?.removeEventListener('keydown', stableHandleKeyDownRef.current)
+
+    // Update refObject
+    ref.current = domNode
+
+    // Re-attach handlers to the new element
+    domNode?.addEventListener('keyup', stableHandleKeyUpRef.current)
+    domNode?.addEventListener('keydown', stableHandleKeyDownRef.current)
+  }, [])
+
+  return refCallback
 }

tests/useHotkeys.test.tsx

@@ -4,9 +4,9 @@ import { FormTags, HotkeyCallback, Keys, Options } from '../src/types'
 import {
   DependencyList,
   JSXElementConstructor,
-  MutableRefObject,
   ReactElement,
   ReactNode,
+  Ref,
   useCallback,
   useState,
 } from 'react'
@@ -372,7 +372,7 @@ test('should reflect set splitKey character', async () => {
   const user = userEvent.setup()
   const callback = jest.fn()
 
-  const { rerender } = renderHook<MutableRefObject<HTMLElement | null>, HookParameters>(
+  const { rerender } = renderHook<Ref<HTMLElement | null>, HookParameters>(
     ({ keys, options }) => useHotkeys(keys, callback, options),
     {
       initialProps: { keys: 'a, b', options: undefined },
@@ -774,6 +774,44 @@ test('should only trigger when the element is focused if a ref is set', async ()
   expect(callback).toHaveBeenCalledTimes(1)
 })
 
+test('should trigger when the ref is re-attached to another element', async () => {
+  const user = userEvent.setup()
+  const callback = jest.fn()
+
+  const Component = ({ cb }: { cb: HotkeyCallback }) => {
+    const ref = useHotkeys<HTMLDivElement>('a', cb)
+    const [toggle, setToggle] = useState(false);
+
+    if(toggle) {
+      return (
+        <span ref={ref} tabIndex={0} data-testid={'div'}>
+          <button data-testid={'toggle'} onClick={() => setToggle(t => !t)}>Toggle</button>
+          <input type={'text'} />
+        </span>
+      )
+    }
+
+    return (
+      <div ref={ref} tabIndex={0} data-testid={'div'}>
+        <button data-testid={'toggle'} onClick={() => setToggle(t => !t)}>Toggle</button>
+        <input type={'text'} />
+      </div>
+    )
+  }
+
+  const { getByTestId } = render(<Component cb={callback} />)
+
+  await user.keyboard('A')
+
+  expect(callback).not.toHaveBeenCalled()
+
+  await user.click(getByTestId('toggle'))
+  await user.click(getByTestId('div'))
+  await user.keyboard('A')
+
+  expect(callback).toHaveBeenCalledTimes(1)
+})
+
 test.skip('should preventDefault and stop propagation when ref is not focused', async () => {
   const callback = jest.fn()