issue: Form obnoxious when combining shouldUseNativeValidation: true and mode: "onBlur"

[amcsi]

Version Number

7.38.0

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-v7-form-context-forked-p4lfm1?file=/src/index.js:255-312

Steps to reproduce

1. Call useForm() with shouldUseNativeValidation: true and mode: "onBlur"
2. Register two required inputs (or multiple to realize how obnoxious this is) with some validation e.g. a pattern validation
3. Have the form rendered with the inputs and a submit button.
4. Click on the first input to focus it
5. Click on the second input, because you decided to fill that one out first

Actual behavior: you are not able to take focus away from the input and the browser forces you to fill out the field correctly. Once you do fill it out, the browser repeats the same thing for the next input, and so on. So you're forced to fill out the fields in order, each correctly.

While we're at it: while using a pattern validation: if you do remove mode: "onBlur", for some reason when you first try to type in text in the incorrect pattern format in the input, then go right to "submit", you'll notice that rather than displaying the custom error message you came with, it just says "Please match the requested format".

https://codesandbox.io/s/react-hook-form-v7-form-context-forked-p4lfm1?file=/src/index.js

Video:
https://user-images.githubusercontent.com/116494/198707207-f0c51a33-8bf7-4b7e-b7ed-90961e5f6683.mp4

Expected behaviour

Expected: you're able to focus the second input, but the first input's state becomes stored as an error in react-hook-form for displaying JS validation.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

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

[bluebill1049]

thanks for the detailed issue report. After my lengthy investigation, I think this is a limitation when combined with validation onBlur, the reason being when reportValidity gets fired it will focus on that input natively by the browser, which means the user will be trapped within the input.

Expected: you're able to focus the second input, but the first input's state becomes stored as an error in react-hook-form for displaying JS validation.

That's pretty much onSubmit mode.

I will update the doc to exclude onBlur and onTouched modes, in fact, highlight it will only work with onSubmit and onChange modes.

[bluebill1049]

Documentation is updated.

[amcsi]

@bluebill1049 I was actually thinking that maybe what could be done is that as far as native validation is concerned, onBlur is ignored. So if mode is "onBlur" and shouldUseNativeValidation: true set set, then while the non-native validation bit could respect the onBlur setting and validate on blur, native validation could ignore the onBlur setting and just act as if mode were just set to onSubmit.

This would allow the onBlur setting to not be unusable together with shouldUseNativeValidation: true.