'Why does Yup validation not work when using both number().positive() and number().moreThan()?

Based on my issue's title, it may seem similar to the one posted here; however, the context is different. In my situation, I have two number fields (i.e., Min and a Max). The Min value has to be a non-zero, positive number and less than the Max value (if there is a Max value). The Max value has to be a non-zero, positive number and greater than the Min value (if there is a Min value). I have error messages that are supposed to display depending on whether those conditions aren't met when a user tries to submit a form; however, it appears that the order matters in determining when an error message is displayed. For example, if I input -5 as the Min value and -2 as the Max value, only the error message for the Min value is displayed, even though the Max value violates the "non-zero" rule.

I'd really appreciate it if someone could suggest any workarounds, if there are any. I've included my code below:

maxValue: Yup.number().when(['minValue'], {
    is: (minValue) => Boolean(minValue),
    otherwise: Yup.number().positive().nullable(),
    then: Yup.number().positive().moreThan(Yup.ref('minValue)).nullable(),
}),
minValue: Yup.number().when(['maxValue'], {
    is: (maxValue) => Boolean(maxValue),
    otherwise: Yup.number().positive().nullable(),
    then: Yup.number().positive().lessThan(Yup.ref('maxValue)).nullable(),
}),


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source