issue: Errors are not removed from array fields

[marcospassos]

Version Number

7.43.0/8-next.4

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-array-fields-with-validation-yup-forked-w9kye1?file=/src/index.js

Steps to reproduce

1. Click on "Add friend" 3 times and see an error is shown
2. Click on "Remove friend" and see the error is still shown

Expected behaviour

Revalidate the form once the item is removed to maintain consistency with the append behavior.

Notice that using trigger is not an option since it will trigger the validation of all nested fields, which is undesired. In our case, we've deeply nested forms, and doing that results in a terrible UX.

Bug.mov

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]

Please use the following code to debug the issue first:

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)
},

https://react-hook-form.com/api/useform

[marcospassos]

I've updated the example with this debugging part. As you can see below, the schema correctly reports no error when removing an item, but RHF still shows the error:

[bluebill1049]

https://codesandbox.io/s/react-hook-form-array-fields-with-validation-yup-forked-ztx800?file=/src/index.js

Please take a look at the CSB, I have switched to the latest version and let me know if I am missing something

Screen.Recording.2023-02-05.at.10.11.20.am.mov

[bluebill1049]

related issue: #9868

[marcospassos]

The problem is still present in your CSB fork:

RHF.Bug.mov

Notice that the error correctly appears after adding the third element (the max is 2), but after removing it, the error remains. It looks like the remove isn't triggering the revalidation on the array field.

[bluebill1049]

Your schema is still returning errors even with 2 items.

[marcospassos]

It's returning the error for the right fields: the array elements. There's no error for the array itself, but the RHF still shows an error at the array level:

[bluebill1049]

Refer to the same reply: #9868 (comment)

[marcospassos]

Sorry, I still don't get it.

Are you saying that RHF showing an error that no longer exists is right? As I have shown, the last revalidation resulted in no error at the array level, but it still keeps a state with an error from the past.

Even using the dirtyFields or touchedFields, I can't workaround this issue since the fields are touched and dirty, but the error doesn't exist - the state that's outdated.

[bluebill1049]

Are you saying that RHF showing an error that no longer exists is right? As I have shown, the last revalidation resulted in no error at the array level, but it still keeps a state with an error from the past.

No, The error is still there under the field array key firends.

[marcospassos]

No, there is no error under the field array key, please see:

Bug.3.mov

[bluebill1049]

https://codesandbox.io/s/react-hook-form-array-fields-with-validation-yup-forked-ztx800?file=/src/index.js

Screen.Recording.2023-02-06.at.8.50.35.am.mov

• 3-row trigger error
• remove 2 still have errors from the schema
• error is hence not removed

[marcospassos]

So, are you saying that an error from a parent field will only be removed once all nested field errors have been fixed, even though it no longer has errors?

[bluebill1049]

#9868 (comment)

pick up the errors by field array key

[marcospassos]

Sorry, I didn't get what you meant by "pick up the errors by field array key".

Do I have access to the path of the field that triggered the revalidation from the resolver?

[marcospassos]

No matter what I do, the error doesn't disappear. Even not returning any other error, RHF still shows the error:
https://codesandbox.io/s/react-hook-form-array-fields-with-validation-yup-forked-w9kye1?file=/src/index.js

bug.4.mov

[bluebill1049]

https://codesandbox.io/s/react-hook-form-array-fields-with-validation-yup-forked-ztx800?file=/src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { useFieldArray, useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
import "./styles.css";

const schema = yup.object().shape({
  friends: yup
    .array()
    .of(
      yup.object().shape({
        firstName: yup.string().required("First Name is required")
      })
    )
    .min(1)
    .max(2)
});

function App() {
  const { register, handleSubmit, control, formState, clearErrors } = useForm({
    mode: "onChange",
    reValidateMode: "onChange",
    defaultValues: {
      friends: []
    },
    resolver: async (data, context, options) => {
      // you can debug your validation schema here
      const { errors, values } = await yupResolver(schema)(
        data,
        context,
        options
      );

      if (Array.isArray(errors.friends) && !formState.isSubmitted) {
        return {
          errors: {},
          values
        };
      }

      return { errors, values };
    }
  });

  console.log("formState.errors", formState.errors);

  const { fields, remove, append } = useFieldArray({
    name: "friends",
    control: control
  });

  const onSubmit = (data) => {
    console.log("submit", data);
  };

  const addFriend = () => {
    append({ firstName: "" });
    clearErrors("friends");
  };

  const removeFriend = (index) => () => {
    remove(index);
  };

  const clearFriends = () => {
    remove();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <p>{formState?.errors?.friends?.message}</p>
      {fields.map((field, index) => {
        return (
          <fieldset key={field.id}>
            <label>
              First Name {index}:
              <input type="text" {...register(`friends.${index}.firstName`)} />
            </label>
            <button type="button" onClick={removeFriend(index)}>
              Remove
            </button>
          </fieldset>
        );
      })}

      <button type="button" onClick={addFriend}>
        Add Friend
      </button>
      <button type="button" onClick={clearFriends}>
        Clear Friends
      </button>
      <input type="submit" />
    </form>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

[marcospassos]

Once you submit, the error never goes away:

Bug.6.mov

[bluebill1049]

I am just giving an example above, it's not the full implementation detail.

[marcospassos]

How can I make the error disappear without using trigger?

No matter what I return from the resolver, once the error is shown, the only way to make it disappear is to trigger the full field validation, which I want to avoid. I don't see any other workaround besides these I've tried with no success.

[bluebill1049]

I am covering this issue to a question as it's expected behaviour with the current library's scope.

---

Unless the field array is valid when your schema returns a valid response, the error will be presented. React hook form doesn't memorise the errors or diff it's a root level error or individual field level error.

If a resolver return

{
  errors: {
    firend: {}, // or firend: [],
  }
}

The formState.errors will persist, until

{
  errors: {}
}

There is no such logic inside hook form to determine or distinguish whether each action returned it's a field array error or individual fields' error.

[Jamil-Bailony]

Hey @bluebill1049
I faced the same issue with array field before. In addition, object field has the same issue. Error is not cleared form an errors object:

object-field-bug.mp4

Check this sandbox I created mocking a real code I am working on:
https://codesandbox.io/s/react-hook-form-object-error-bug-d3eew0?file=/src/App.js

[ifrimsilviu-goosfraba]

Hello, is there any update on this issue? I'm also facing it, I've tried the following:

1. Manually trigger the re-validation of the form. It solves the problem, but it also displays all the errors of the field's inputs, which is not ideal.
2. Manually trigger the resolver when the fields of the array change. If validation passed, clear the errors of the field array. This also solves the problem, but it also hides the errors of the field's inputs, which is, again, not ideal.

[nihilenz]

Houston we have a big problem with useFieldArray and errors

[marcospassos]

Apparently, it's a bug by design 🙃

[jeffersoneagley]

Just hit a similar bug. Not really sure how I can work around it. Even calling trigger again doesn't remove the 3rd row of error. Kinda hard to use an off the shelf array item component if I have to put a state-library-specific register method on every single input within that control.

[ifrimsilviu-goosfraba]

One workaround that I've done in the recent past was to only render array errors if there aren't any items in it.

{!fields.length && renderErrors()}

I know it's not the ideal workaround, yet it does the job for my specific use case. Hope it helps anyone.

[vazhin]

I used this workaround, works in my case since I have an array().min(1) validation rule. Thanks!

[enzocussuol]

Same error here...

I have an array of objects. I can use "remove" function from "useFieldArray()" to remove one of these objects. However, if the object i'm removing contains an error, this error is not being removed from "errors", and so i'm not able to submit the form, even if the object that contained the error no longer exist.

One solution, as discussed, is to manually trigger, as this would update "errors"... but i think this should be automatic.

[enzocussuol]

After spending some time on this, i've noticed that even triggering the entire form did not solve the issue. Error still there after removing the object and triggering form.

In fact, the problem was i was not unregistering (with the unregister() method) the object before calling the remove() method. Calling unregister() and then remove() solved for me, hope it helps if someone runs into this problem.

[ChamaraWP]

Hello, I have the same issue. Even my resolver doesn't return any errors. It still shows the last state of the error I received for the useFieldArray. 
Here is part of the zod schema I'm facing with this issue.

......
student: z
    .array(
      z.object({
        name: z.string().min(1, 'Please enter a member name'),
        subject: z.string().min(1, 'Please enter a member role'),
      })
    )
    .max(10)
    .optional(),
.....    

Is there any proper solution for this issue?

[sKopheK]

can confirm even in the latest version
sometimes, i have more error items for fieldarray than there is actual number of fields which might cause the issues. once i have no fields, error list is reset to 0, but once i add just a single one, all old errors appear in the error list
and even if i do edit errors manually after each add/remove, or just call clearErrors for whole fieldArray, submitting form will somehow smuggle the errors back and form won't be submitted - thus removing error for each field that's being added and filtering out invalid errors in SubmitHandler's onInvalid callback parameter seems to be the solution

[salahkai]

Can confirm in the latest version when using array of objects, errors still persist, only removed when re-clicking on the submit again.