[Zod]: Resolver does not validate to reflect correct error state without manual form.trigger()

[MusaGillani]

Describe the bug
Form Validation doesn't re render the correct error message to reflect correct error from formState

To Reproduce
Steps to reproduce the behavior:

1. Visit the sandbox with a minimal working example using react-hook-form bootstrapped with shadcn ui
2. Enter a value smaller than the total value listed in UI in the Base labelled input field
3. Click submit
4. The error message indicates a sum mismatch
5. Enter the remaining sum value in any other field
6. This does not cause the error message to hide although the error state updates correctly, verified from console logs
7. Only changing the values in Base input field remove the errors from the UI

Screen recording showing validation not running:
Video

Sandbox link

• Zod resolver

Expected behavior
Validation should trigger when changing a any other field than base ,
due to formState update causing resolver to re-validate the form data

Desktop:

• OS: Mac OS
• Browser: chrome
• Version 122

Additional context
The error is fixed using form.trigger() directly in the onChange of the <Input/> component, which removes the error from the UI when changing the input value.
Maybe the formState is being updated correctly but the resolver does cause a re-render?

Screen Recording, showing form.trigger() added to the Overtime label triggers the validation
Video

[briavicenti]

We're having a similar issue, described in a comment here! I think that these two issues are dupes.

[sowka1995]

I have a similar issue. The refine function is triggered and resolved but error from formState.erros does not disappear -> if I call form.trigger() in every onChange field callback then everything works good and errors are cleared form formState.

[sowka1995]

@MusaGillani the interesting thing is that when you add rules={{ deps: ['field1', 'field2'] }} to FormField (which passthrough to Controller) it works as expected :D
https://stackblitz.com/edit/stackblitz-starters-8cqgsc

[MusaGillani]

@MusaGillani the interesting thing is that when you add rules={{ deps: ['field1', 'field2'] }} to FormField (which passthrough to Controller) it works as expected :D
https://stackblitz.com/edit/stackblitz-starters-8cqgsc

Interesting,
could you point me to some docs for this? would like to dig a lil deeper

[sowka1995]

@MusaGillani the interesting thing is that when you add rules={{ deps: ['field1', 'field2'] }} to FormField (which passthrough to Controller) it works as expected :D
https://stackblitz.com/edit/stackblitz-starters-8cqgsc

Interesting, could you point me to some docs for this? would like to dig a lil deeper

I found it by accident. I was looking for something like "dependencies" because I worked with Ant Design for a very long time and there I used it a lot to solve this kind of problem. Once I found this in the rules object, I set it up, tested it and it actually works, but why isn't there anything about it in the documentation? Maybe it also works by accident :D

[MusaGillani]

@MusaGillani the interesting thing is that when you add rules={{ deps: ['field1', 'field2'] }} to FormField (which passthrough to Controller) it works as expected :D
https://stackblitz.com/edit/stackblitz-starters-8cqgsc

Interesting, could you point me to some docs for this? would like to dig a lil deeper

I found it by accident. I was looking for something like "dependencies" because I worked with Ant Design for a very long time and there I used it a lot to solve this kind of problem. Once I found this in the rules object, I set it up, tested it and it actually works, but why isn't there anything about it in the documentation? Maybe it also works by accident :D

yeah the docs seem pretty arcane atp, i wonder if it uses trigger() under the hood, since the validations were working fine with updates to formstates as well but re-renders were not being "triggered"

[sowka1995]

@MusaGillani the interesting thing is that when you add rules={{ deps: ['field1', 'field2'] }} to FormField (which passthrough to Controller) it works as expected :D
https://stackblitz.com/edit/stackblitz-starters-8cqgsc

Interesting, could you point me to some docs for this? would like to dig a lil deeper

I found it by accident. I was looking for something like "dependencies" because I worked with Ant Design for a very long time and there I used it a lot to solve this kind of problem. Once I found this in the rules object, I set it up, tested it and it actually works, but why isn't there anything about it in the documentation? Maybe it also works by accident :D

yeah the docs seem pretty arcane atp, i wonder if it uses trigger() under the hood, since the validations were working fine with updates to formstates as well but re-renders were not being "triggered"

Maybe, but I do not think so. The problem with using trigger() is that in the case of mode="onSubmit" (default) the error will be displayed even before the form is submitted but using rules.deps, the error appears only after submit.

[MusaGillani]

@MusaGillani the interesting thing is that when you add rules={{ deps: ['field1', 'field2'] }} to FormField (which passthrough to Controller) it works as expected :D
https://stackblitz.com/edit/stackblitz-starters-8cqgsc

Interesting, could you point me to some docs for this? would like to dig a lil deeper

I found it by accident. I was looking for something like "dependencies" because I worked with Ant Design for a very long time and there I used it a lot to solve this kind of problem. Once I found this in the rules object, I set it up, tested it and it actually works, but why isn't there anything about it in the documentation? Maybe it also works by accident :D

yeah the docs seem pretty arcane atp, i wonder if it uses trigger() under the hood, since the validations were working fine with updates to formstates as well but re-renders were not being "triggered"

Maybe, but I do not think so. The problem with using trigger() is that in the case of mode="onSubmit" (default) the error will be displayed even before the form is submitted but using rules.deps, the error appears only after submit.

yeah we're using submitCount from formState to only trigger() when the form is submitted once.
since the entire schema needs to be validated all trigger() calls we're already running in a useEffect using watch()'s subscription. just added that check in useEffect

here's the snippet for that

  useEffect(() => {
    if (form.formState.submitCount === 0) {
      return;
    }
    const subscription = form.watch(() => form.trigger());
    return () => subscription.unsubscribe();
  }, [form.watch, form.trigger, form.formState, form]);