Vue.withModifiers() does not accept key modifiers
Vue version
3.2.45
Link to minimal reproduction
Steps to reproduce
Follow the link to the minimal reproduction. It creates an element with an event with an "enter" key modifier:
Vue.h("input", { onKeydown: Vue.withModifiers((e) => console.log(e), ["enter"]) })Open the JavaScript console.
Focus the input element and press some keys.
What is expected?
Only when pressing the "enter" key, there should be a message in the console log.
What is actually happening?
Every key leads to output in the console log.
System Info
System:
OS: macOS 12.5.1
CPU: (10) arm64 Apple M1 Max
Memory: 10.14 GB / 64.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 19.4.0 - /opt/homebrew/bin/node
npm: 9.2.0 - /opt/homebrew/bin/npm
Browsers:
Chrome: 109.0.5414.87
Firefox: 107.0.1
Safari: 16.0
Any additional comments?
I'm aware of the difference between event modifiers and key modifiers. But the documentation clearly says: "For other event and key modifiers, the withModifiers helper can be used." So I would expect that I can pass key modifiers to withModifiers as well.
What the docs really mean here is that you can use it for modifier keys, i.e. Shift etc. Replace your "enter" with "shift" and it works (only logs when shift key is being held down while typing).
A PR in the docs repo to word this better would surely be apprechiated by the docs team.
Yes, I'm aware that in templates you can do@keyup.enter and it filters for the enter key. However that's a different kind of filter, which in temlates is only being added when the compiler finds it being used on keyup/keydown events (v-on:input.enter doesn't do anything). It's currently not a public API.