I have a Yup validation schema for a Formik component, which needs to be tested against a couple of conditions. Two are external dependencies and the other is its own value. The field in question is a type of array and rendered via a FieldArray, where each field has an object where individual keys can receive specific errors.
Here is what this schema looks like:
testField: Yup.array().of(
Yup.object().shape({
a_key: Yup.object().shape({
"a_value": Yup.string().max(10,"Too long"),
}),
})
).test(
"atLeastOneFieldIsPopulated",
VALIDATION_MESSAGE,
(value) => validateAtLeastOneFieldIsPopulated(value) === false
)
.when(["field1", "field2"], {
is: (field1, field2) => // some condition
then: Yup.array().of(
Yup.object().shape({
keyOfField: Yup.object().shape({
[keyOfField]: Yup.string().required(),
}),
})
),
otherwise: (schema) => schema,
})
The rules for the above schema are:
- If none of the input fields in the FieldArray are populated (validateAtLeastOneFieldIsPopulated(value), then check if the field1 and field2 satisfy a condition (assume true)
- Render errors for each input field of FieldArray. (testField(s))
- Dismiss errors from all FieldArray inputs when any FieldArray is populated. Because this takes us back to rule # 1
The above seems to work fine. validateAtLeastOneFieldIsPopulated checks that any one of the fields of testField array type had a value in them and returns false otherwise, rendering the correct error messages for all of specific testField inputs.
The formikForm is set to validateOnChange.
The issue: It only seems to remove errors for the "testField" that is receiving the onChange input. It does not remove the error for the "testField" that did not receive the input onChange event. Inspecting the errors object confirms that the error remains.
I am not sure why this would be the case, because test condition should fail them and console logging it seems to do that.