issue: Validation not working properly for MUI5 Datepicker

[sprobejames]

Version Number

7.37.0

Codesandbox/Expo snack

https://codesandbox.io/s/cocky-banzai-lusgcv

Steps to reproduce

1. DONT select a date then click Submit button.

• Working Properly, validation error is displayed.
  

2. Select any date by clicking calendar icon, then click Submit button [1st Click]

• [BUG] Validation still shows error message even if date is already selected from the popup.
  
• Since date was selected, it should not be showing the error message right?

3. However, if you click the Submit button again, the validation will succeed and hide the error.
   

---

Note:
I'm currently using the MUI datepicker together with Yup validation.

Expected behaviour

I am expecting the error message to be hidden when clicking Submit button after selecting a Date from the Popup Modal of the Datepicker. However, it takes 2 clicks to validate the date and hide the error message before the form submits.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[leapful]

@sprobejames : This is not a bug. You are integrating react-hook-form with MUI in a wrong way.

1. MUI component date picker is not a native input element therefore using {...register('fromDate')} does not work as MUI date picker is using "inputRef" prop to pass ref callback not normal "ref" prop name.
2. When working with custom component like MUI, it's recommended to use "useController" hook or "Controller" component. The reason is because custom component like MUI is usually handling field value by themself and only interact with outside via callback like "onChange", "onBlur", "onError" therefore react-hook-form handling should be passed to <DatePicker> component, not to <TextField> component inside prop "renderInput" of <DatePicker> component like your codesandbox sample.

Working demo: https://codesandbox.io/s/agitated-neumann-fyr8mp?file=/src/DatePicker.js

[leapful]

@sprobejames

The prop "error" in line 9 is your error message that you passed on DatePicker component which is coming from "formState.errors" of react-hook-form for your field "fromDate".

The prop "inputError" is an alias for the real prop name "error" of DatePicker built-in validation to show error message.

Since you already use yup + react-hook-form to manage validations, prop "inputError" should be omitted to avoid overridden error from react-hook-form.

[sprobejames]

I see. I tested it and confirmed your explanation. Thank you so much @leapful , it really helped me a lot 🙇‍♂️

[belics-avrogan]

renderInput is not supported in "@mui/x-date-pickers": "^6.9.1",, any solution in this case?

[leapful]

@belics-avrogan

Please open a new discussion for your issue with a minimal re-producible codesandbox url because this current discussion might be not related to your problem, also react-hook-form and MUI lib version has been changed now.

[kam-st]

I have the issue with regular html form, if new Date is supplied, the watched value does not update for date. rest of values get updated.