fix: ensure correct error structure for array field with error that b…

…ecomes empty (#3785) * cleanup arrays if the last value, which is not undefined, gets removed from it (cherry picked from commit dcc63d9) * chore: improve changeset --------- Co-authored-by: Christoph Gruber <[email protected]>
jaredpalmer · May 26, 2023 · bc9cb28 · bc9cb28 · vercel · May 26, 2023
1 parent 35fa4cc
commit bc9cb28
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/.changeset/fair-students-fix.md 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
@@ -306,7 +306,12 @@ class FieldArrayInner<Values = {}> 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
@@ -383,6 +383,14 @@ describe('<FieldArray />', () => {
       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', () => {