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