[Bug]: checkbox does not dispatch "input" event, like native checkbox

[stefanprobst]

Environment

Developement/Production OS: linux
Node version: 20.16.0
Package manager: pnpm@9.7.0
Radix Vue version: 1.9.3
Vue version: 3.4.37
Nuxt version: 3.12.4
CSS framework: tailwindcss@3.4.9
Client OS: linux
Browser: firefox

Link to minimal reproduction

https://github.com/stefanprobst/issue-shadcn-vue-checkbox

Steps to reproduce

• clone the issue repo, pnpm install, pnpm run dev
• when toggling the native checkboxes, the <form> receives input events, and updates the url search params, but when toggling the radix-vue checkboxes, no input events are dispatched

Describe the bug

see above

Expected behavior

see above

Context & Screenshots (if applicable)

note that the react implementation seems to programmatically dispatch the event here

[epr3]

@stefanprobst The checkbox component has the same behaviour as the one from the React implementation. You would need to add @click to the form instead of @input because it uses a button element. Relevant CodeSandbox: https://codesandbox.io/p/devbox/shadcn-hook-form-68y4d8

@zernonia Would it make sense to stop the propagation of the click event on the Checkbox, maybe even the Radio and any other components which rely on clicks to modify the input value and set up a watcher that dispatches change and input events?

[stefanprobst]

You would need to add @click to the form instead of @input

in the example in the issue reproduction, the @input handler is also triggered when a user enters text into the <input name="q" type="search">. instead of listening to both "click" and "input" events, i think i'd prefer if the fact that the checkbox is implemented as a button is an implementation detail i don't have to know about.

The checkbox component has the same behaviour as the one from the React implementation

it does actually work in react - see https://github.com/stefanprobst/issue-radix-react-checkbox

note that react everywhere uses onChange which maps to the behavior of the native input event. from the react docs: