Need some event handler for form control

[z22919456]

Need some event handler for form control, like onBlur, onFocus and onChange

This is a great component library, but I've encountered some problems when using formik and react-hook-form. I am using these two libraries to control my form and error validation, but they require to use the onChange and onBlur events, which are not provided by Radix-ui. While the onValueChange event is very useful, it's not sufficient for form control.

For example, when onValueChange is triggered, I can use setValue to simulate the onChange event (although it's not very convenient). However, I can't simulate onBlur without the event handler being provided. I can setTouched when onValueChange trigged, but this doesn't happen at the same time as a real onBlur event.

I hope that the excellent onValueChange event can be retained, while also providing the onBlur, onFocus, and onChange events. I believe this would greatly improve the developer experience. Before that, I'm afraid I have to try chakra-ui first. Sorry....

Thank you for making such a great library.

[benoitgrelard]

Hey @z22919456,

Do you have an example of what you're trying to achieve you could provide in a codesandbox? We can take a look. I believe most libraries provide an alternative API to hook events. Otherwise, these events bubble anyway, so you should be able to still make it work.

If you can provide an example, we'll be happy to take a look.

[z22919456]

Thank you for your response.

I have written a sample that uses radix-ui Checkbox with react-hook-form. It includes problems that I encountered when using react-hook-form, and also uses a native checkbox as a comparison. This sample uses react hook form, but the same problem can also be encountered when using formik. Both need to know which field has been touched for validation, but I can't simulate onBlur event....

https://codesandbox.io/s/frosty-cherry-ibxxvo?file=/src/HookFormWithSetValue.jsx:836-860

[swernerx]

Just a quick note that we have the same problem.

[benoitgrelard]

Thank you for your response.

I have written a sample that uses radix-ui Checkbox with react-hook-form. It includes problems that I encountered when using react-hook-form, and also uses a native checkbox as a comparison. This sample uses react hook form, but the same problem can also be encountered when using formik. Both need to know which field has been touched for validation, but I can't simulate onBlur event....

https://codesandbox.io/s/frosty-cherry-ibxxvo?file=/src/HookFormWithSetValue.jsx:836-860

I don't really understand why they wouldn't be able to add an onBlur, Checkbox.Root is just a button so you can definitely attach an onBlur to it.

[asherccohen]

same goes in our case, it's particularly visible with Select.

[monsterooo]

same goes in our case, it's particularly visible with Select.

Do you have a solution

[ghost]

I have been trying to integrate Radix-Ui with the excellent remix-forms and it's impossible to get Selects to work properly since there's no way to pass the select reference to the underlying select (and the onChange event is not compatible because I need the whole event and not just the value to be passed to the parent, since the form is controlled by the parent).

Being able to pass a ref to the underlying select should be enough to solve most of the issues

[emlai]

We're also using Radix to implement a component library. If we ever need to add support for the event parameter, this will likely lead us to migrate away from Radix.

[SrShark]

The onValueChange function should pass event: React.SyntheticEvent prop, not a simple string. This way it would be the standard, and we can use it like any native element.

The function onChange provided by react-hook-form needs the event prop to set the value correctly.