Why is YUP conditional validation causing branch is not a function at Condition.fn error

Question

I have a MUIRadioGroup (options = Low, Medium and High) and a multi-select MUIAutocomplete component on my form.

<MUIRadioGroup
              name="requestDetail.riskAssesmentDetail.riskClassification"
              label="Risk Classification"
              variant="outlined"
              size="small"
              defaultValue
            />

<MUIAutocomplete
                  name="requestDetail.riskAssesmentDetail.safetyDetail.investigationType"
                  label="Type of Investigation"
                  variant="outlined"
                  size="small"
                  multiple
                  disableCloseOnSelect
                  options={API_Safety_InvestigationType}
                />

My Schema is...

requestDetail: yup.object().shape({ ...
    riskAssesmentDetail: yup.object().shape({
      riskClassification: yup
        .string()
        .label("Risk Classification")
        .required()
        .typeError("Invalid Selection"),
      safetyDetail: yup
        .object()
        .shape()
        .when("riskClassification", {
          is: (riskClassification) =>
            ["Medium", "High"].includes(riskClassification),
          then: yup.object({
            investigationType: yup
              .array()
              .label("Type of Investigation")
              .min(1),
          }),
        }),
    }),

When radio button is "Medium" or "High, I need to perform validation on the MUIAutocomplete component.

I get an error...

Uncaught (in promise) TypeError: branch is not a function
    at Condition.fn (index.esm.js:175:1)
    at Condition.resolve (index.esm.js:188:1)
    at index.esm.js:586:1
    at Array.reduce (<anonymous>)
    at ObjectSchema.resolve (index.esm.js:586:1)
    at ObjectSchema._cast (index.esm.js:1670:1)
    at ObjectSchema.cast (index.esm.js:610:1)
    at ObjectSchema._cast (index.esm.js:1683:1)
    at ObjectSchema.cast (index.esm.js:610:1)
    at ObjectSchema._cast (index.esm.js:1683:1)

If I remove the conditional validation all works...

requestDetail: yup.object().shape({ ...

    riskAssesmentDetail: yup.object().shape({
      riskClassification: yup.string().label("Risk Classification").required(),
      safetyDetail: yup
        .object()
        .shape({
          investigationType: yup.array().label("Type of Investigation").min(1),
        }),
    }),

What is this error about and how do I fix it?

Answer 1

I just ran into this issue as well. Your when validation needs to change to have a function on the then property.

      safetyDetail: yup
        .object()
        .shape()
        .when("riskClassification", {
          is: (riskClassification) =>
            ["Medium", "High"].includes(riskClassification),
          then: () => yup.object({
            investigationType: yup
              .array()
              .label("Type of Investigation")
              .min(1),
          }),
        }),

Answer 2

I ran into the same issue while doing upgrades. The old version of yup accepted the following.

someField: string().when("someOtherField", {
      is: true,
      then: string()
        .max(5, "Must be 5 characters or less")
        .required("Required")
    })

The above code was giving me a TypeScript error after upgrading yup. I solved it using the following

someField: string().when("someOtherField", {
      is: true,
      then: () => string()
        .max(5, "Must be 5 characters or less")
        .required("Required")
    })