Formik: Removing the last element in a FieldArray sets array value to undefined

Created on 16 Dec 2019  路  10Comments  路  Source: formium/formik

馃悰 Bug report

Current Behavior

If you remove the last element in a FieldArray, it sets the new value at that name to undefined.

Calling remove(0) on:

{
   foos: [{ bar: 1 }]
}

becomes:

{}

Expected behavior

I'd expect the value to be set to an empty array.

Calling remove(0) on:

{
   foos: [{ bar: 1 }]
}

should become

{
   foos: []
}

This behavior was unexpected and led to some errors calling methods on undefined, where my application otherwise guarantees the array's presence.

Reproducible example

https://codesandbox.io/s/formik-codesandbox-template-9q9db

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 2.0.8

stale

Most helpful comment

Yes this is a major problem for me also! I think it makes sense in the context of touched and errors objects, but applying the same 'cleanup' logic to values is going to be a problem for a lot of people!

All 10 comments

Hi,

have similar issue when setting value to empty array e.g.

{
  foo: 'bar',
  lang: ['en']
}

setting value [] to lang field results in:

{
  foo: 'bar'
}

It's reproducible on Formik v2.0.7 and v2.0.8.
Works fine on v2.0.6

This is the problem: https://github.com/jaredpalmer/formik/blob/448e3e7f5477400a8f77a29f2065e2b8f9a96d01/packages/formik/src/utils.ts#L130

setIn take care of your "empty" field and silently removes it from values, which is really confusing.

2050

I am also having the same problem,
Whenever i am removing the last item from my array, I am having errors in my code

// TypeError: Cannot read property 'map' of undefined
{ 
   obj.foo.map(......)
}

I think this is a problem.

I reproduced this as well. This issue is affecting the behavior of setFieldValue in general as in my case I did not have any <FieldArray>, in my case it was a list of checkboxes that are throwing an error every time I uncheck everything.

https://codesandbox.io/s/formik-codesandbox-template-kyc9x?fontsize=14&hidenavigation=1&theme=dark

I found a workaround for this - in my case I got it temporarily fixed by rolling back package version version of formik from version 2.0.8 to version 2.0.6

Yes this is a major problem for me also! I think it makes sense in the context of touched and errors objects, but applying the same 'cleanup' logic to values is going to be a problem for a lot of people!

This issue was holding a release for me today. Had to implement an ugly hack to get around this.
I have an idea how to fix it. Will give it a shot.

PR opened #2144.
I reverted the changes on setIn function that was ignoring empty arrays, and then treated empty arrays for touched and errors inside FieldArray.

this has been fixed at 2.0.11. I believe we can close it. @jaredpalmer

fixed in 2.1.1

Was this page helpful?
0 / 5 - 0 ratings

Related issues

najisawas picture najisawas  路  3Comments

outaTiME picture outaTiME  路  3Comments

sibelius picture sibelius  路  3Comments

jaredpalmer picture jaredpalmer  路  3Comments

jordantrainor picture jordantrainor  路  3Comments