Fix #1292

Author: JohannesKlauss

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

@@ -132,13 +132,19 @@ export const isHotkeyMatchingKeyboardEvent = (e: KeyboardEvent, hotkey: Hotkey,
     return true
   }
 
-  if (keys) {
+  if (keys && keys.length > 0) {
+    // For multi-key combinations, the pressed key must be one of the expected keys
+    // This prevents triggering when a modifier is pressed while holding an unrelated key
+    if (!keys.includes(mappedCode)) {
+      return false
+    }
     // Check if all keys are present in pressedDownKeys set
     return isHotkeyPressed(keys)
   }
 
-  if (!keys) {
-    // If the key is not set, we only listen for modifiers, that check went alright, so we return true
+  if (!keys || keys.length === 0) {
+    // If no keys are set (modifier-only hotkey like 'shift'), we only listen for modifiers.
+    // The modifier checks above passed, so we return true.
     return true
   }
 

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

@@ -1470,6 +1470,30 @@ test('Should ignore modifiers if option is set', async () => {
   expect(callback).toHaveBeenCalledTimes(2)
 })
 
+test('should not trigger callback twice when pressing a key and then a modifier', async () => {
+  const user = userEvent.setup()
+  const callback = vi.fn()
+
+  renderHook(() => useHotkeys('a', callback))
+
+  // Press 'a' and hold it, then press shift while still holding 'a'
+  // The callback should only fire once (when 'a' is pressed)
+  await user.keyboard('{a>}{Shift>}{/Shift}{/a}')
+
+  expect(callback).toHaveBeenCalledTimes(1)
+})
+
+test('should not trigger callback when modifier is pressed while holding unrelated key', async () => {
+  const user = userEvent.setup()
+  const callback = vi.fn()
+
+  renderHook(() => useHotkeys('b', callback))
+
+  // Press 'a' and hold it, then press shift - should not trigger 'b' callback
+  await user.keyboard('{a>}{Shift>}{/Shift}{/a}')
+
+  expect(callback).toHaveBeenCalledTimes(0)
+})
 
 test('should respect dependencies array if they are passed', async () => {
   function Fixture() {