useKeyModifier: CapsLock does not get set back to false directly

I use const capsLockState = useKeyModifier('CapsLock') to detect if the caps lock is currently active or not.

On first press it activates correctly, but on second press (turning it off again) it doesn’t get set to false directly. After a click on the website or pressing any key after disabling, it turns to false.

I can reproduce this in the Demo: https://vueuse.org/core/useKeyModifier

Using an Ubuntu 20.04 with Chrome 97.

[JMaylor]

Hey @Shinigami92. I wrote this useKeyModifier function and just want to let you know the reason behind ‘bug 1’ - why the state is updated on ANY key press. If you imagine the following situation in the case that we only updated on the modifier key being pressed:

1. User turns CAPS on while on your website. Modifier state is updated to true.
2. User tabs off your site and turns CAPS off. Your page can’t detect this keypress and so doesn’t update the modifier state to false.
3. User comes back to your site and continues typing. There is no CAPS press so they are now typing with CAPS off, but your app thinks CAPS is on.

Hope that makes sense. No matter what key you press, the event exposes the current modifier state of all modifier keys via the getModifierState function.

You can add more listeners to update the state more regularly, at the cost of performance. e.g. mousemove events also provide modifier states - see https://github.com/vueuse/vueuse/pull/698#issuecomment-908241915

In terms of picking up the initial modifier state on page load, I looked into this at the time and couldn’t find a way to do it. If you simulate a key press through JS, all the modifier states are false. They are only populated on a ‘real’ keyboard event - SO thread

[wheatjs]

Strange, I’m unable to reproduce on my end