fixes #3026 useMagicKeys - doesn't trigger on releasing and pressing …

…again the second key in a combination
vueuse · hunterwilhelm · Apr 3, 2025 · Apr 4, 2025 · Apr 7, 2025 · Jul 8, 2025
commit 4218aa536f918f35eef9945ac3c776e82fa3befe
diff --git a/packages/core/useMagicKeys/index.test.ts b/packages/core/useMagicKeys/index.test.ts
@@ -63,4 +63,48 @@ describe('useMagicKeys', () => {
     }))
     expect(Ctrl_Shift_Period.value).toBe(true)
   })
+  it('macos command key combinations with double keydown', async () => {
+    // #3026: doesn't trigger on releasing and pressing again the second key in a combination
+    const { Meta_Z } = useMagicKeys({ target })
+    expect(Meta_Z.value).toBe(false)
+
+    // Simulate first keydown of command key
+    target.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Meta',
+      metaKey: true,
+    }))
+    expect(Meta_Z.value).toBe(false)
+
+    // Simulate first keydown of Z
+    target.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'z',
+      metaKey: true,
+    }))
+    expect(Meta_Z.value).toBe(true) // true because of the first keydown of command key + z
+    await new Promise(resolve => setTimeout(resolve, 1))
+    expect(Meta_Z.value).toBe(true) // after 1ms, it's still true
+
+    // Simulate second keydown of Z without keyup (macOS behavior)
+    target.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'z',
+      metaKey: true,
+    }))
+    expect(Meta_Z.value).toBe(false) // false because it has to manually trigger keyup event
+    await new Promise(resolve => setTimeout(resolve, 1))
+    expect(Meta_Z.value).toBe(true) // after 1ms, it's true again
+
+    // Simulate keyup of Z
+    target.dispatchEvent(new KeyboardEvent('keyup', {
+      key: 'z',
+      metaKey: true,
+    }))
+    expect(Meta_Z.value).toBe(false)
+
+    // Simulate keyup of command key
+    target.dispatchEvent(new KeyboardEvent('keyup', {
+      key: 'Meta',
+      metaKey: false,
+    }))
+    expect(Meta_Z.value).toBe(false)
+  })
 })
diff --git a/packages/core/useMagicKeys/index.ts b/packages/core/useMagicKeys/index.ts
@@ -137,7 +137,18 @@ export function useMagicKeys(options: UseMagicKeysOptions<boolean> = {}): any {
   }
 
   useEventListener(target, 'keydown', (e: KeyboardEvent) => {
-    updateRefs(e, true)
+    const key = e.key?.toLowerCase()
+    // #3026: doesn't trigger on releasing and pressing again the second key in a combination
+    // Solution: Trigger "keyup" event manually when "keydown" event is fired without "keyup"
+    if (key && e.getModifierState('Meta') && current.has(key)) {
+      updateRefs(e, false)
+      setTimeout(() => {
+        updateRefs(e, true)
+      }, 0)
+    }
+    else {
+      updateRefs(e, true)
+    }
     return onEventFired(e)
   }, { passive })
   useEventListener(target, 'keyup', (e: KeyboardEvent) => {