Always get undefined when using Yup.array().when() with two arrays

Question

I have two arrays and I want at least one of them to be filled before submitting

My config:

initialValues={{
    images: [],
    current_images: [],
}}
validationSchema={Yup.object().shape(
    {
        images: Yup.array().when("current_images", {
            is: (current_images) => current_images.length === 0,
            then: Yup.array().min(1, "Pick at least one image"),
            otherwise: Yup.array(),
        }),
        current_images: Yup.array().when("images", {
            is: (images) => images.length === 0,
            then: Yup.array().min(1, "Pick at least one image"),
            otherwise: Yup.array(),
        }),
    },
    [["current_images", "images"]]
)}

Version:

"formik": "^2.2.9",
"yup": "^0.32.11"

Here is the error I got after clicking submit button:

How can I fix this problem ?

Answer 1

I found an alternative solution that using .test() instead of .when()

initialValues={{
    images: [],
    current_images: [],
}}
validationSchema={Yup.object().shape(
    {
        images: Yup.array().test(
            "images_required", // test name
            "Pick at lease one image", // error message
            function (item) {
                // item is the current field (images in this case)
                return item.length > 0 || this.parent.current_images.length > 0;
            }
        }),
        current_images: Yup.array().test(
            "current_images_required",
            "Pick at lease one image",
            function (item) {
                return item.length > 0 || this.parent.images.length > 0;
            }
        }),
    }
)}