issue: React Hook Form doesn't revalidate Zod's Array/Object onChange

[kiocos]

Version Number

7.43.9

Codesandbox/Expo snack

https://codesandbox.io/s/zealous-tristan-5cw1mz?file=/src/App.js

Steps to reproduce

1. Write something on field "first name"
2. Clear the field and notice no error message saying the field is required appeared
3. Write something on field "last name"
4. Clear the field and notice an error message appears
5. Click submit and notice error messages for both fields appears (both fields are re-validated on onSubmit, but not on onChange)

Expected behaviour

Form should be re-validate onChange, but this doesn't occur when refine() is done on Zod's Array or Object. Revalidation seems to only happen with primitive variables.

Zod throws an error for both Arrays/Objects as well as for primitive values here:

    async parseAsync(data, params) {
        const result = await this.safeParseAsync(data, params);
        if (result.success)
            return result.data;
        throw result.error;
    }

I copied the error thrown for the refinement on a primitive value, as well as the object returned for the refinement on an array in my actual application. They look very similar to me, major difference is the path, which makes me think this may be an issue with RHF and not Zod, since apparently it's throwing the error in the same way.

What browsers are you seeing the problem on?

Chrome

Relevant log output

// Error thrown for primitive variable (boolean) 
{
  success: false,
  error: {
    issues: [
      {
        code: "custom",
        message: "Refine on boolean",
        path: [
          "mockedArray",
          0,
          "booleanProperty",
        ],
      },
    ],
    addIssue: (sub) => {
      this.issues = [...this.issues, sub];
    },
    addIssues: (subs = []) => {
      this.issues = [...this.issues, ...subs];
    },
    name: "ZodError",
  },
  _error: {
    issues: [
      {
        code: "custom",
        message: "Refine on boolean",
        path: [
          "mockedArray",
          0,
          "booleanProperty",
        ],
      },
    ],
    addIssue: (sub) => {
      this.issues = [...this.issues, sub];
    },
    addIssues: (subs = []) => {
      this.issues = [...this.issues, ...subs];
    },
    name: "ZodError",
  },
}

// Error thrown for array
{
  success: false,
  error: {
    issues: [
      {
        code: "custom",
        message: "Refine on array",
        path: [
          "mockedArray",
        ],
      },
    ],
    addIssue: (sub) => {
      this.issues = [...this.issues, sub];
    },
    addIssues: (subs = []) => {
      this.issues = [...this.issues, ...subs];
    },
    name: "ZodError",
  },
  _error: {
    issues: [
      {
        code: "custom",
        message: "Refine on array",
        path: [
          "mockedArray",
        ],
      },
    ],
    addIssue: (sub) => {
      this.issues = [...this.issues, sub];
    },
    addIssues: (subs = []) => {
      this.issues = [...this.issues, ...subs];
    },
    name: "ZodError",
  },
}

Code of Conduct

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

[bluebill1049]

react hook form validate field level by default, if you need to validate group of inputs then use trigger

[kiocos]

react hook form validate field level by default, if you need to validate group of inputs then use trigger

Thank you for replying!

The problem I'm having with trigger is that it ends up re-rendering the whole array.

I believe this wouldn't happen if I had it like render('myArray[0].fieldName'), but I don't want to have an error for each field. My goal is to have an error message for the entire array when more than X items inside the array are set to true.

In order to do this, I have to keep track of the number of items selected every time an item's value changes. But if I use a trigger for this, it will re-render the entire array, correct?

I considered validating manually and using setError but I ended up with the same problem of re-renders at root level.

[leapful]

@kiocosta

You can still achieve validation on field array item at field level by using isolated component.

Working demo: https://codesandbox.io/s/winter-water-y7gpw2?file=/src/App.js

[arslonbekXX]

pls with Controller example