The onChange of the antd inputs does not work inside the FormItem

[avegatolber]

Codesandbox here

[jsun969]

I assume you should try watch in react hook form instead of onChange. Docs here

[avegatolber]

It seems that the useController field is overwriting the onChange of the antd input in FormItem.tsx

[jsun969]

Yea. Also it's not recommended to use onChange or value with react-hook-form. Check the react hook form's documentation first then use this lib plz.

[avegatolber]

I understand but sometimes it is necessary, especially in ANTD Select components, where in the second parameter of the onChange you receive the option with all the information of the selected element, including the id, label and anything else. That is exactly why I need to use the onChange but it is not working.

And the "onChange" through the watch does not give me this information.

I understand that it is not recommended to use, but in this case it does not even give me the option to use it because it does not work. However in the demo it is working, it must have been some versioning issue i guess.

I will see what alternative I can find, thanks anyway

[avegatolber]

Adding this code to FormItem children solved my problem. It's probably not the best way to do it, but it works for me. Now i can access to the options from the onChange event in the Antd Select component and the form still working as expected.

{Children.map(
   children,
      (child) =>
         isValidElement(child) &&
         cloneElement(child, {
           ...field,
           //@ts-expect-error onChange type safe is not necessary here
           onChange: (...params) => {
              child.props.onChange && child.props.onChange(...params)
              field.onChange(...params)
             },
            onBlur: () => {
              child.props.onBlur && child.props.onBlur()
              field.onBlur()
            },
            ...(valuePropName && {
            [valuePropName]: field.value,
       }),
   }),
)}

[jsun969]

Sounds reasonable. Could you help create a PR for your awesome idea? Thank you so much!

[avegatolber]

PR

Is my first time contributing, I hope I did the PR well 😄.

[jsun969]

@avegatolber thx a lot for the PR. There are some minor fixes I need to deal with. I'll publish your feature ASAP!