issue: Incorrect error reporting when using resolvers

[Kirdock]

Version Number

7.46.0

Codesandbox/Expo snack

https://codesandbox.io/s/resolver-validation-bug-qjq7kk?file=/src/App.tsx

Steps to reproduce

1. Go to https://codesandbox.io/s/resolver-validation-bug-qjq7kk?file=/src/App.tsx
2. Click on "Add" in the "With Resolvers" form
3. See that the required error is shown
4. Click "Add" again
5. See that the required errors are missing now
6. Click on "Submit" and "Add"
7. See that field errors are reset

Video:

resolver.mp4

I'm actually showing more than one error in this video.

1. Probably related to issue: field-array-level validation errors not sent to the formState when blurring array items' inputs #10776.
2. On field add, the validation is immediately triggered, when using resolvers. This does not happen if plain rules are used instead.
3. If a fieldArray/root error comes in, each field error is reset. You can see that the required errors are lost once the root error comes in.
4. (Maybe related to 3.) Field errors are cleared when the form is submitted and afterwards a new field is added.

Expected behaviour

1. On field edit, the error of the fieldArray should be updated
2. When using resolvers, adding fields don't immediately trigger the validation
3. FieldArray errors don't reset the field errors
4. Adding fields doesn't reset field errors after submit

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]

If this depends on field-related validation then it's a limitation that would require trigger API, hook form is field level focused.

[Kirdock]

To which error(s) are you referring to? My 4 mentioned errors (except the first one) are referring to a different behavior "with resolvers" and "without resolvers" (with rules). Because the 3 errors are working when I don't use resolvers and just rules, I assume that there is no limitation regarding that.

[leapful]

@Kirdock

The problem is caused by zod issue order from your schema.

For example, at the first time adding item, root error path people will be the first issue and produces an error object { people: {} }, then, error path people.0.name will be appended to this object.

But for the second adding, error path people.0.name will go first and produce array error { people: [{ ... }] }, therefore, when root error path people (which is now the last one) is appended, it will override the previous array error.

You can implement a custom resolver to prioritize order of root error path to achieve your expected behavior.

Working demo: https://codesandbox.io/s/resolver-validation-bug-forked-dqs4cn?file=/src/FormWithResolver.tsx

[Kirdock]

Thx, this would resolve the 3rd and 4th bug.
In my opinion the order priorisation should be in the @hookform/resolvers library. You never know in which order a library will report the errors.

Do you know what happens for the 2nd bug? On field-add the validation for the fields is immediately triggerd. This does not happen if no resolvers are used

[leapful]

@Kirdock

Without resolver, your field people will use built-in validator of react-hook-form and the default value of criteriaMode is firstError which will not trigger next validator if previous validator already has error, in this case, it's the validator for minLength rule.

[Kirdock]

Ok, now I get it. So the resolver has to handle the firstError criteria mode. Another thing that should be done in @hookform/resolvers, but I have the feeling that I have to do the changes on my own.

Do you know a way how I can check if a field is an object or an array within the resolver? I would need that in order to set the correct path (with "root"). Or do I have to set a custom path in the zod schema?