[v2] removeItem puts empty array in in error state and causes isValid to be incorrect

🐛 Bug report

Current Behavior

When I call FieldArray’s removeItem, it sets the error state to an empty array, and it stays that way until validate is run again. Having a key with a truthy value results in isValid being calculated as true, when the form is actually still valid.

This codesandbox illustrates the issue: https://codesandbox.io/s/formik-example-uez7v. When you click the X next to one of the items, the errors state is Object {arr: Array[0]} and isValid is false.

Somewhat of a duplicate of https://github.com/jaredpalmer/formik/issues/784, but the behavior has changed to be a bit worse. Before, this was just a blip that ended up being cleaned up on a future render, presumably because validate was being triggered immediately and overwriting the error state. Now, no such rerunning of validation is occurring.

Expected behavior

I would expect that the error state for array fields isn’t automatically set to [], which would then also solve the isValid problem.

Reproducible example

https://codesandbox.io/s/formik-example-uez7v.

Your environment

Software	Version(s)
Formik	v2.0.1-rc.5
React	16.8.6
TypeScript	N/A
Browser	Chrome
npm/Yarn	N/A
Operating System	OS X

[bichoymessiha]

As mention in this https://github.com/jaredpalmer/formik/issues/784#issuecomment-503135849. You need to validate manually after removing item.

[lexanth]

I’ve worked out what’s going on:

• The FieldArray helpers do more than just update the current value. They shift existing errors and touched state around because the indexes have changed (e.g. if I remove the first item, I want the touched states for sub-fields to all shift by 1)
• For most of the array methods, this works by applying the same method to the value, the errors and the touched state
• If the errors or touched state are initially undefined, trying to apply the same method does some strange things - it falls back to an empty array, but then uses splice on that, so it ends up expanding the empty array to an array of undefined
• It then does a check against the empty array, but that just checks array length, rather than for the array items all being undefined/null

As a workaround, you can set validateOnChange to true for a FieldArray - then it will automatically tidy up the broken generated errors by triggering a revalidate (which is what @sibelius’s fix was doing).

I had a further issue here in that that only works when the values have actually changed, but you can trigger this by calling move with the source and destination index the same, so I had to ignore null moves.

The proper fix would be ignore updating the errors or touched state if they’re undefined (while retaining the validateOnChange behaviour). If the touched state is undefined, there can’t be anything to shift around.

i.e. something like

      const prevErrors = getIn(prevState.errors, name)
      let fieldError = alterErrors && !!prevErrors
        ? updateErrors(prevErrors)
        : undefined;
      const prevTouched = getIn(prevState.touched, name)
      let fieldTouched = alterTouched && !!prevTouched
        ? updateTouched(prevTouched)
        : undefined;