issue: Array error does not update on a change if any of its fields have errors

[kylemclean]

Version Number

7.43.7

Codesandbox/Expo snack

https://codesandbox.io/s/wispy-surf-znf62c?file=/src/App.tsx

Steps to reproduce

1. Go to CodeSandbox.

2. Click "Submit" to start displaying validation errors on change.
   

3. Click "Add" button to add an element to the array, causing the array length to be too long, and the error "Form error: Array must contain at most 3 element(s)" to correctly appear.
   

4. Click "Remove" next to the newly-added element to remove it, causing the array length to be valid, thus causing the error to correctly disappear.
   

5. Delete all of the text in one of the existing array elements, making it invalid and causing an error to correctly appear.
   

6. Click the "Add" button again to add another element to the array.
   INCORRECT BEHAVIOR: even though the array length is no longer valid, the error from before, "Form error: Array must contain at most 3 element(s)", is NOT being displayed.
   

7. Click the "Submit" button, which causes the expected error "Form error: Array must contain at most 3 element(s)" to correctly display.
   

8. Click "Remove" next to the newly-added element, causing the array length to be valid.
   INCORRECT BEHAVIOR: even though the array length is now valid, the error "Form error: Array must contain at most 3 element(s)" is still incorrectly being displayed.
   

9. Click the "Submit" button, which causes the incorrect error "Form error: Array must contain at most 3 element(s)" to disappear.
   

Expected behaviour

On step 6, clicking the "Add" button should immediately display the error "Form error: Array must contain at most 3 element(s)" instead of requiring the form to be submitted to display it.

On step 8, clicking the "Remove" button should immediately hide the error "Form error: Array must contain at most 3 element(s)" instead of requiring the form to be submitted to hide it.

What browsers are you seeing the problem on?

Firefox, Chrome

Relevant log output

No response

Code of Conduct

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

[bluebill1049]

Array error will not get updated by onChange as hook form validation based on field level, each user action (append, prepend and etc.) do update the field array. You can always fallback to trigger to trigger field array level validation.

[kylemclean]

The issue I am describing is that appends and removes on the array are sometimes not revalidating the array. This appears to be a bug.

[bluebill1049]

Please do your own debugging: https://react-hook-form.com/api/useform/

resolver: async (data, context, options) => {
  // you can debug your validation schema here
  console.log('formData', data)
  console.log('validation result', await anyResolver(schema)(data, context, options))
  return anyResolver(schema)(data, context, options)
},

see if the validation schema return the correct output. validation will always gets executed after each action: https://github.com/react-hook-form/react-hook-form/blob/master/src/useFieldArray.ts#L323-L361

[kylemclean]

I have now confirmed using the debug logging that the validation is executed and returns the correct output on steps 6 and 8, but the displayed error does not change until the form is submitted. The CodeSandbox link has been updated to include the debug logging.

The problem seems to be with line 329 in useFieldArray.ts. On steps 6 and 8, both existingError and error are truthy, causing the update to control._formState.errors to be skipped, and thus the error state is wrong.

[bluebill1049]

The problem seems to be with line 329 in useFieldArray.ts. On steps 6 and 8, both existingError and error are truthy, causing the update to control._formState.errors to be skipped, and thus the error state is wrong.

thanks for looking close into this issue, could you debug further on this since you are already deep into the issue, and find out the root cause? If it's possible to send over a PR would be even greater.

[kylemclean]

I will see what I can do.

[bluebill1049]

just following up on this issue again, step 6 doesn't return any errors with 7.44.7. I will have to revert the fix for now as it introduced a regression.

[bluebill1049]

hey @kylemclean could you share more detail on the origin issue? I test above seems to work fine. I will look into it this weekend.

[kylemclean]

@bluebill1049
I have updated the issue with some screenshots that should more clearly illustrate the problem.

Please also see my comment on #10207 (comment), which might help demonstrate why my PR #10150 resulted in #10207 appearing.