withModifiers(() => {}, [" enter"]) Does not take effect in JSX

[laamfun]

Vue version

3.5.13

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-qzas5vub?file=src%2Fmain.jsx

Steps to reproduce

{
"@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

[jh-leong]

The input event does not support the enter modifier, as enter is meant for keyboard events (e.g., keydown/keyup).

Workarounds: Playground

1. ​Use withKeys (Vue's built-in helper):

const Foo = () => {
   return <input onKeyup={withKeys(test, ['enter'])} />;
};

2. ​JSX directive syntax (via unplugin-vue-macros):

const Bar = () => {
  return <input onKeyup_enter={test} />;
};

3. Manual key check in the handler

[laamfun]

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?

[jh-leong]

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!