jaredpalmer / jaredpalmer/formik

FieldArray remove helper can set error state to empty array

Open
#784 11 comments 6 reactions 0 assignees View on GitHub
stale
Dominant language
TypeScript
Stars
34.3k
Forks
2.8k
PR merge metrics
No merged PRs in 30d

Description

## Current Behavior

When using FieldArray's remove helper, my errors state for the field gets set to an empty array for two renders. This is problematic if you are expecting errors to be an object with only string values.

[This line](https://github.com/jaredpalmer/formik/blob/master/src/FieldArray.tsx#L194) is what sets the errors state to an empty array, since the function is used both for the form state as well as the errors state.

## Steps to Reproduce

Use FieldArray with a populated array and call .remove() with an index. Log the errors state and observe that for two renders, the field has an empty array error state.

Here's an example codesandbox: https://codesandbox.io/s/p9x78o5zyq
If you open up the console and click the X button to remove one of the items in the array, you'll notice that errors.arr is set to an empty array for two logs before being reset by validate.

![Imgur](https://i.imgur.com/Xy9MFA6.png)

## Expected behavior

The arr field should not be present in the errors object for these cases

## Suggested solution(s)

Need a way to not default the error state to an empty array on remove. Seems like it might be necessary to change updateArrayField to allow for different logic when updating the error state rather than sharing the function that updates the form state.

**CodeSandbox Link**: https://codesandbox.io/s/p9x78o5zyq

---

- Formik Version: 1.0.1
- React Version: 16.4.1
- TypeScript Version: N/A
- Browser and Version: Chrome 67.0.3396.99
- OS: Mac OS X
- Node Version:N/A
- Package Manager and Version: N/A

Contributor guide

Open the contributing guide

Research direction

Start with src/FieldArray.tsx around line 194, where updateArrayField is shared by form and error state updates. Reproduce the behavior using the linked CodeSandbox and inspect the two renders after calling FieldArray.remove() on a populated array. Done means the removed field is absent from errors rather than temporarily represented by an empty array.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.