Validation problem with react-hook-form

[sonesay]

Hi All, I'm, having issues when I try and use a custom onChange with chakra-react-select and react-hook-form my validation fails incorrectly. I have put a required option there and even though the dropdown list is selected the validation reports it as missing. If I remove the custom onChange event it will work normally but I need this custom onChange to toggle another field.

Here the the sandbox code if anyone can help. Thanks.

https://codesandbox.io/s/confident-stonebraker-xtser9?file=/src/App.tsx

[csandman]

If react-hook-form doesn't receive the value in it's onChange function there's no way for it to know if the value is selected. The easiest way to fix this is by adding an inline onChange function which calls both your custom function along with react-hook-form's:

onChange={(newValue) => {
  typeChanged(newValue);
  onChange(newValue);
}}

Here's a working version of your code: https://codesandbox.io/s/chakra-react-select-rhf-example-frc697?file=/src/App.tsx:3325-3496

[sonesay]

Thank you so much for your help and explanation.