Yup resolver failing to validate one field dependent on another

[Mathius17]

Hi there! First of all I'm not sure if this problem is caused by the resolver, if it's a problem with Yup itself or simply because I don't have a proper understanding of the usage of this two wonderful tools.

So I'm trying to validate a field based on the value of another field (comparing that last date is greater than first date). But the error messages have been rather inconsistent in this case, usually not disappearing when it should. I made a sandbox to reproduce the issue in a simplified way (two numbers, first one should be less than the second one).

Working sandbox: https://codesandbox.io/s/polished-framework-ofvx8

Steps to reproduce:

1. Insert a number in the first input
2. Insert a lower number in the second input (you should get an error message)
3. Change the first input so that first < second
4. Blur

Desired outcome:
After step 3, the error message on the second input should disappear.

Current outcome:
The error message on the second input remains even though it went through the validation (as showcased in the console). Also note that even if the error message doesn't disappear, the "submit" is now clickable as the form is valid (disabled is form invalid).

[Paul-Vandell]

Hey @Mathius17 i have check your code and i found some issue and misunderstood of how yup work when you want to check two values.

1. you should remove your schema from your component
2. you should test your logic in the schema directly

I suggest you an alternative to your code here -> https://codesandbox.io/s/infallible-panini-uz2ri?file=/src/App.js
Hope your understand the difference and the yup logic behind.
There is no issue here in the react-hook-form But i found one with yup. i will open a new issue for this.

[Mathius17]

Thank you very much @Vandell63! I definitely like your approach way more and now I have a better understanding of how to check two fields dependent on each other in Yup.

One last question just to make sure we're on the same page. The issue still remains, right? Although is a problem with Yup itself.

[Paul-Vandell]

No sorry, your issue is fixed for me.
i just got another another issue with yup about context object inject into the form. Sorry it is independent from your case.
I think we have resolve it right ?

[Mathius17]

@Vandell63 I just checked your alternative code again and repeating the "Steps to reproduce" in your example is giving me the same results unfortunately.

I can dig deeper and make a PR if necessary, but I'm trying to understand first where the error comes from.

[Paul-Vandell]

Yes i see now sorry. You're right !. The error disappear only when you change the Max value. But when you change the min value only the isValid property trigger. But the error don't disappear.
So point 1 and 2 correct but not the third one. :/ . I continue to investigate

I'm pretty sure that it is linked with -> #28
Where the form is not sync with the schema after a first validation

[bluebill1049]

Thanks, guys, will investigate the cause of the issue.

[bluebill1049]

react hook form validate a single field at a time (this allow us to optimize render), if you need to depend field to trigger validation, you can use trigger.

[Mathius17]

Thanks @bluebill1049! I'm closing the issue then.