diff --git a/.changeset/fair-students-fix.md b/.changeset/fair-students-fix.md new file mode 100644 index 000000000..fb3492a03 --- /dev/null +++ b/.changeset/fair-students-fix.md @@ -0,0 +1,7 @@ +--- +'formik': patch +--- + +Fixed field error state for array fields that have an error and become empty through an API like `arrayHelpers.remove`. + +The prior behavior resolved the field error to `[undefined]`, now it is simply `undefined`. diff --git a/packages/formik/src/FieldArray.tsx b/packages/formik/src/FieldArray.tsx index 5e2806417..2526aa9e0 100644 --- a/packages/formik/src/FieldArray.tsx +++ b/packages/formik/src/FieldArray.tsx @@ -288,7 +288,12 @@ class FieldArrayInner extends React.Component< if (isFunction(copy.splice)) { copy.splice(index, 1); } - return copy; + // if the array only includes undefined values we have to return an empty array + return isFunction(copy.every) + ? copy.every(v => v === undefined) + ? [] + : copy + : copy; }, true, true diff --git a/packages/formik/test/FieldArray.test.tsx b/packages/formik/test/FieldArray.test.tsx index 8dd10c3ab..627dc47cf 100644 --- a/packages/formik/test/FieldArray.test.tsx +++ b/packages/formik/test/FieldArray.test.tsx @@ -382,6 +382,14 @@ describe('', () => { expect(formikBag.errors.friends).toEqual(undefined); expect(formikBag.touched.friends).toEqual(undefined); }); + it('should clean up errors', () => { + act(() => { + formikBag.setFieldError('friends.1', 'Field error'); + arrayHelpers.remove(1); + }); + + expect(formikBag.errors.friends).toEqual(undefined); + }); }); describe('given array-like object representing errors', () => {