Formik + Yup, array being converted to object and then failing validation

Question

I have an array of filters with the following Yup schema:

const schema = Yup.object().shape({
  filters: Yup.array().strict().of(
    Yup.array().strict().of(
      Yup.object().shape({
        // This isn't important
      })
    )
  )
});

When I open the page, the form has the following data (ie the value of formik.value):

{
  "filters": [
    [
      {
        "type": "samplemeta",
        "cmp": "lt",
        "key": "fastqc__%GC",
        "value": [
          "50"
        ]
      }
    ]
  ],
}

Now for some reason, the validation fails with this error (ie the value of formik.errors):

{
  "filters": [
    "filters[0] must be a `array` type, but the final value was: `{\n  \"0\": {\n    \"type\": \"\\\"samplemeta\\\"\",\n    \"cmp\": \"\\\"lt\\\"\",\n    \"key\": \"\\\"fastqc__%GC\\\"\",\n    \"value\": [\n      \"\\\"50\\\"\"\n    ]\n  }\n}`."
  ]
}

So even though the actual data is apparently valid, my array with the shape [{}] is being converted to an object in the shape {0: {}}, which is then failing the Yup validation. I don't see how this is happening, when I'm using the <FieldArray> component to manage the filters array. You can see this here in the source code, which looks like:

 <FieldArray name="filters" render={outerArrayHelpers => (...)}/>

Why is this happening, and how can I avoid it?

score 0 · Accepted Answer · answered Jul 09 '20 at 07:31

It turns out this is an already-report bug, which I have written up here. It was originally reported here, and fixed here, but wasn't included in 2.1.4. I believe 2.1.5 should have the fix, but in the meantime you can solve this problem using npm install https://pkg.csb.dev/jaredpalmer/formik/commit/157603ab/formik, which installs a development version of Formik with the pull request merged.

Formik + Yup, array being converted to object and then failing validation

1 Answers1