Formik: Touched state of multi value field

[dferber90]

Whenever a field holds an array of values and when one item was removed from that list, then the touched state for that field ends up being an empty array.

Are empty arrays supposed to represent a list from which the touched element has disappeared?

Example with FieldArray: https://codesandbox.io/s/x77o7v4kxz?expanddevtools=1
Full with <select multiple />: https://codesandbox.io/s/qq429w4n4q?expanddevtools=1

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale[bot]]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[dferber90]

I ended up writing some code which treats empty arrays as touched. It’s fine to keep it closed but this is pretty weird behavior, especially since it’s undocumented.

[kylemh]

@dferber90 I’m having this issue as well. Are you able to share your solution?

[dferber90]

@kylemh What we ended up doing was to treat an empty array as touched. We would only treat it as untouched when the value is undefined or the key does not exist.

We wrote a helper function like isTouched which checks for it.

See https://github.com/commercetools/ui-kit/blob/08a6045381d633e44c3494b41c7d6763104366fb/src/components/inputs/select-input/select-input.js#L27-L29

This works because Formik doesn't set any value unless a field gets touched. So Formik would never set an empty array for an untouched field.

We didn't really solve the problem of accurately representing touched states but this was good enough for us for now.