fix(useMagicKeys): fix key order issue on first use (#4505)

babu-ch · web-flow · commit b6947f783293 · 2025-01-22T07:53:07.000Z
diff --git a/packages/core/useMagicKeys/index.test.ts b/packages/core/useMagicKeys/index.test.ts
@@ -0,0 +1,66 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { useMagicKeys } from '.'
+
+describe('useMagicKeys', () => {
+  let target: HTMLInputElement
+  beforeEach(() => {
+    target = document.createElement('input')
+  })
+  it('single key', async () => {
+    const { A } = useMagicKeys({ target })
+
+    target.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'A',
+    }))
+
+    expect(A.value).toBe(true)
+  })
+  it('multiple keys', async () => {
+    const { Ctrl_Shift_Period } = useMagicKeys({ target })
+    expect(Ctrl_Shift_Period.value).toBe(false)
+
+    target.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'control',
+      ctrlKey: true,
+    }))
+    expect(Ctrl_Shift_Period.value).toBe(false)
+
+    target.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'shift',
+      ctrlKey: true,
+      shiftKey: true,
+    }))
+    expect(Ctrl_Shift_Period.value).toBe(false)
+
+    target.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Period',
+      ctrlKey: true,
+      shiftKey: true,
+    }))
+    expect(Ctrl_Shift_Period.value).toBe(true)
+  })
+  it('multiple keys(in a different order)', async () => {
+    const { Ctrl_Shift_Period } = useMagicKeys({ target })
+    expect(Ctrl_Shift_Period.value).toBe(false)
+
+    target.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'shift',
+      shiftKey: true,
+    }))
+    expect(Ctrl_Shift_Period.value).toBe(false)
+
+    target.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'control',
+      ctrlKey: true,
+      shiftKey: true,
+    }))
+    expect(Ctrl_Shift_Period.value).toBe(false)
+
+    target.dispatchEvent(new KeyboardEvent('keydown', {
+      key: 'Period',
+      ctrlKey: true,
+      shiftKey: true,
+    }))
+    expect(Ctrl_Shift_Period.value).toBe(true)
+  })
+})
diff --git a/packages/core/useMagicKeys/index.ts b/packages/core/useMagicKeys/index.ts
@@ -165,7 +165,7 @@ export function useMagicKeys(options: UseMagicKeysOptions<boolean> = {}): any {
         if (!(prop in refs)) {
           if (/[+_-]/.test(prop)) {
             const keys = prop.split(/[+_-]/g).map(i => i.trim())
-            refs[prop] = computed(() => keys.every(key => toValue(proxy[key])))
+            refs[prop] = computed(() => keys.map(key => toValue(proxy[key])).every(Boolean))
           }
           else {
             refs[prop] = ref(false)

Original file line number	Diff line number	Diff line change
`@@ -165,7 +165,7 @@ export function useMagicKeys(options: UseMagicKeysOptions<boolean> = {}): any {`
`165`	`165`	`if (!(prop in refs)) {`
`166`	`166`	`if (/[+_-]/.test(prop)) {`
`167`	`167`	`const keys = prop.split(/[+_-]/g).map(i => i.trim())`
`168`		`- refs[prop] = computed(() => keys.every(key => toValue(proxy[key])))`
	`168`	`+ refs[prop] = computed(() => keys.map(key => toValue(proxy[key])).every(Boolean))`
`169`	`169`	`}`
`170`	`170`	`else {`
`171`	`171`	`refs[prop] = ref(false)`