withModifiers(() => {}, [" enter"]) Does not take effect in JSX #13139
-
Vue version
3.5.13
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-qzas5vub?file=src%2Fmain.jsx
Steps to reproduce
Image
{
"@tsconfig/node22": "^22.0.1",
"@types/node": "^22.13.15",
"@vitejs/plugin-vue": "^5.2.3",
"@vitejs/plugin-vue-jsx": "^4.1.2",
"@vue/tsconfig": "^0.7.0",
"npm-run-all2": "^7.0.2",
"prettier": "3.5.3",
"sass": "^1.86.1",
"typescript": "~5.8.2",
"vite": "^6.2.4",
"vite-plugin-vue-devtools": "^7.7.2",
"vue-tsc": "^2.2.8",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
}
What is expected?
Trigger the function when the Enter key is pressed
What is actually happening?
Every time the button is pressed, the function will be triggered
System Info
System: OS: macOS 15.3.2 CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz Memory: 24.91 GB / 64.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 22.12.0 - ~/.node/node-v22.12.0-darwin-x64/bin/node Yarn: 1.22.22 - ~/.node/node-v22.12.0-darwin-x64/bin/yarn npm: 10.9.0 - ~/.node/node-v22.12.0-darwin-x64/bin/npm pnpm: 10.7.0 - ~/.node/node-v22.12.0-darwin-x64/bin/pnpm Browsers: Chrome: 134.0.6998.166 Safari: 18.3.1
Any additional comments?
No response
Beta Was this translation helpful? Give feedback.
All reactions
The input event does not support the enter modifier, as enter is meant for keyboard events (e.g., keydown/keyup).
Workarounds: Playground
- Use
withKeys(Vue's built-in helper):
const Foo = () => { return <input onKeyup={withKeys(test, ['enter'])} />; };
- JSX directive syntax (via unplugin-vue-macros):
const Bar = () => { return <input onKeyup_enter={test} />; };
- Manual key check in the handler
Replies: 1 comment 2 replies
-
The input event does not support the enter modifier, as enter is meant for keyboard events (e.g., keydown/keyup).
Workarounds: Playground
- Use
withKeys(Vue's built-in helper):
const Foo = () => { return <input onKeyup={withKeys(test, ['enter'])} />; };
- JSX directive syntax (via unplugin-vue-macros):
const Bar = () => { return <input onKeyup_enter={test} />; };
- Manual key check in the handler
Beta Was this translation helpful? Give feedback.
All reactions
-
Thank you very much. I verified that it is indeed valid, but nothing related was retrieved on the documentation website. Should this be added to the official documentation and explain the limitations of withModifiersd?
Is there any way to remind people who can make decisions to consider and judge this matter?
Beta Was this translation helpful? Give feedback.
All reactions
-
Thanks for pointing this out. The docs currently cover Event Modifiers and Key Modifiers, but the render function section indeed lacks key modifiers documentation.
I'll open a PR to address this gap in the docs. Appreciate the feedback!
Beta Was this translation helpful? Give feedback.