useMagicKeys weird behavior with meta key

[damienroche]

const keys = useMagicKeys()
const ctrlK = keys['Meta+K']

watch(ctrlK, (v) => {
  if (v)
    console.log('Meta+K have been pressed')
})

With this code, I have a console log when I pressed Meta+K but after this first log, if I press only Meta key, console is fired. If I press another key then I press Meta key, I no longer have console.log (expected behavior)

Meta+K => console => Control+K have been pressed
Meta => console => Control+K have been pressed
Meta => console => Control+K have been pressed
Meta => console => Control+K have been pressed
K => void
Meta => void
Meta => console => Control+K have been pressed

[francoism90]

@damienroche Could you try again with { deep: true } as watch option?

[damienroche]

@francoism90 I will try it.
also the bug is reproducible on the documentation here :
https://vueuse.org/core/useMagicKeys/

press a meta key and B key for example,
on release KeyB is still displayed on Keys Pressed section. You have to press the B key twice to hide it.

[shayneo]

I also am seeing this

[shayneo]

It looks like the order of releasing keys matters

Here is a quick example

const { command, a } = useMagicKeys()

Press and holdcmd+a

• command is true
• a is true

Release command then release a

• command is false
• a is false

Press and holdcmd+a, then release a then release command

• command is false
• a is true

[CapitaineToinon]

I'm having the same issue with useMagicKeys, useKeyModifier and onKeyStoke too. It seems like the browser just never fires the on key up of a key after it's been combined with Meta?

[m0dch3n]

I created my own solution now

[antfu]

#1312