react-hook-form: `Controller`: validate `onBlur` + `shouldFocusError` seemingly not working properly

Describe the bug

When using a Controller wraps a MUI TextField it does not seem to neither trigger validation onBlur nor focus the field.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/s/react-hook-form-material-ui-helpers-h7swy
  2. Fill in “a” in First name (has minLength 4)
  3. Tab to next field (trigger blur )
  4. Click Submit

Codesandbox link (Required)

https://codesandbox.io/s/react-hook-form-material-ui-helpers-h7swy

Expected behavior

  • at 3. - it first name should have been validated and turned into an error
  • at 4. - it should focus “First name” as it’s the first - and only - field with an error

Desktop (please complete the following information):

  • OS: OSX
  • Browser: Chrome
  • Version: 86.0.4240.111

Additional context

Have a look at RHFTextField, in a simplified way it basically does what’s described in the documentation.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 15 (7 by maintainers)

Most upvoted comments

In the case of synchronous validation methods I wouldn’t expect it to ever reach isSubmitting

If one would have have async validation methods I don’t know what would be good - maybe to introduce isValidation

you can up vote this feature request: https://github.com/react-hook-form/react-hook-form/issues/2842

Amazingly quick response btw. Cheers 🙇 🙏

Thanks for the issue report.

  • reValidateMode Screen Shot 2020-10-27 at 6 26 54 pm perhaps you are after
mode: 'onTouched';