Merge pull request #1275 from matiastucci/main

Try to prevent events firing incorrectly when using `useKey: true`

Author: JohannesKlauss

packages/react-hotkeys-hook/src/lib/validators.ts

@@ -89,8 +89,21 @@ export const isHotkeyMatchingKeyboardEvent = (e: KeyboardEvent, hotkey: Hotkey,
 
   const mappedCode = mapCode(code)
 
-  if (useKey && keys?.length === 1 && keys.includes(producedKey.toLowerCase())) {
-    return true
+  if (useKey) {
+    if (keys?.length === 1 && keys.includes(producedKey.toLowerCase())) {
+      if (!ignoreModifiers) {
+        if (alt !== altKey) return false
+        if (shift !== shiftKey) return false
+        if (mod) {
+          if (!metaKey && !ctrlKey) return false
+        } else {
+          if (meta !== metaKey) return false
+          if (ctrl !== ctrlKey) return false
+        }
+      }
+      return true
+    }
+    return false
   }
 
   if (

packages/react-hotkeys-hook/src/test/useHotkeys.test.tsx

@@ -1732,4 +1732,28 @@ test('Should trigger only produced key hotkeys', async () => {
   await user.keyboard('Y')
   expect(callbackZ).toHaveBeenCalledTimes(1)
   expect(callbackY).toHaveBeenCalledTimes(2)
-})
+})
+
+test('Should trigger only produced key hotkeys with Dvorak layout', async () => {
+  const callbackDWithUseKey = vi.fn()
+
+  renderHook(() => useHotkeys('h', callbackDWithUseKey, { useKey: true }))
+
+  const keyDownEventUSLayout = createEvent.keyDown(document, {
+    key: 'h',
+    code: 'KeyH',
+    keyCode: 72
+  })
+
+  fireEvent(document, keyDownEventUSLayout)
+
+  const keyDownEventDvorakLayout = createEvent.keyDown(document, {
+    key: 'd',
+    code: 'KeyH',
+    keyCode: 68
+  })
+
+  fireEvent(document, keyDownEventDvorakLayout)
+
+  expect(callbackDWithUseKey).toHaveBeenCalledTimes(1)
+})