FIX: issue with common type data on collection item deletion + collec…

…tion initial values clean after reset (#231) * fix: use undefined as collection actions default value to prevent issues * fix: field first value from null oldFieldById value * fix: collection initialValues after reset issue
BearStudio · Dec 10, 2024 · 86d5b5d · 86d5b5d
1 parent 85b3879
commit 86d5b5d
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 31 deletions.
diff --git a/apps/examples/cypress/e2e/collection.cy.ts b/apps/examples/cypress/e2e/collection.cy.ts
@@ -45,10 +45,10 @@ describe("Collection", () => {
   });
 
   it("Remove all items", () => {
-    cy.get('[data-test="collection-item[1]"] [aria-label="Delete"]').click();
+    cy.get('[aria-label="Delete member 1"]').click();
     cy.get('[data-test="collection-item[1]').should("not.exist");
 
-    cy.get('[data-test="collection-item[0]"] [aria-label="Delete"]').click();
+    cy.get('[aria-label="Delete member 0"]').click();
     cy.get('[data-test="collection-item[0]').should("not.exist");
 
     cy.formSubmit();
@@ -60,7 +60,7 @@ describe("Collection", () => {
     cy.field("members[1].name").fill("John");
     cy.field("members[2].name").fill("Doe");
 
-    cy.get('[data-test="collection-item[2]"] [aria-label="Delete"]').click();
+    cy.get('[aria-label="Delete member 2"]').click();
     cy.field("members[1].name").hasValue("John");
   });
 
@@ -69,7 +69,7 @@ describe("Collection", () => {
     cy.field("members[1].name").fill("John");
     cy.field("members[2].name").fill("Doe");
 
-    cy.get('[data-test="collection-item[1]"] [aria-label="Delete"]').click();
+    cy.get('[aria-label="Delete member 1"]').click();
     cy.field("members[1].name").hasValue("Doe");
   });
 
@@ -90,6 +90,13 @@ describe("Collection", () => {
     cy.field("members[0].company").hasValue("Initial Company (1)");
     cy.field("members[1].name").hasValue("Initial Name (2)");
     cy.field("members[1].company").hasValue("Initial Company (2)");
+
+    // Check that new item don't recover already consumed initial values
+    cy.get('[data-test="collection-item[0]"] [aria-label="Add"]').click();
+    cy.field("members[2].name").hasValue("Initial Name (2)");
+    cy.field("members[2].company").hasValue("Initial Company (2)");
+    cy.field("members[1].name").hasValue("");
+    cy.field("members[1].company").hasValue("Default company (2)");
   });
 
   it("Mounted/Unmounted collection", () => {
@@ -148,4 +155,21 @@ describe("Collection", () => {
     cy.field("items[2]").should("exist");
     cy.field("items[3]").should("not.exist");
   });
+
+  it("Remove primary data collection item", () => {
+    cy.get("button").contains("Display").click();
+
+    cy.field("conditioned[0]").hasValue("Initial value (1)");
+    cy.field("conditioned[1]").hasValue("Initial value (2)");
+    cy.field("conditioned[2]").should("not.exist");
+
+    cy.get("button").contains("Add item").click();
+    cy.get("button").contains("Add item").click();
+
+    cy.field("conditioned[3]").should("exist").type("new value");
+
+    cy.get('[aria-label="Delete conditioned 2"]').click();
+
+    cy.field("conditioned[2]").hasValue("new value");
+  });
 });
diff --git a/apps/examples/src/pages/collection.tsx b/apps/examples/src/pages/collection.tsx
@@ -97,7 +97,7 @@ const Collection = () => {
               </Box>
               <Box pt="8">
                 <IconButton
-                  aria-label="Delete"
+                  aria-label={`Delete member ${index}`}
                   icon={<Icon as={FiTrash2} />}
                   onClick={() => collection.remove(index)}
                   variant="ghost"
@@ -303,7 +303,7 @@ const ConditionedCollection = () => {
             label={`Conditioned ${index}`}
           />
           <IconButton
-            aria-label="Delete"
+            aria-label={`Delete conditioned ${index}`}
             icon={<Icon as={FiTrash2} />}
             onClick={() => conditionedCollection.remove(index)}
             variant="ghost"

diff --git a/packages/formiz-core/src/selectors.ts b/packages/formiz-core/src/selectors.ts
@@ -49,7 +49,6 @@ export const formInterfaceSelector = <
     },
     reset: (options?: ResetOptions) => {
       state.actions.reset(options);
-      state.actions.resetInitialValues();
     },
     submitStep: state.actions.submitStep,
     goToStep: state.actions.goToStep,

diff --git a/packages/formiz-core/src/store.ts b/packages/formiz-core/src/store.ts
@@ -364,24 +364,6 @@ export const createStore = <Values extends object = DefaultFormValues>(
         });
       },
 
-      resetInitialValues: () => {
-        set((state) => {
-          let initialValues = cloneDeep(
-            state.formConfigRef.current?.initialValues
-          );
-
-          setTimeout(() => {
-            state.fields.forEach((field) => {
-              initialValues = omitValueByFieldName(initialValues, field.name);
-            });
-          });
-
-          return {
-            initialValues,
-          };
-        });
-      },
-
       // FIELDS
       registerField: (
         fieldId,
@@ -770,7 +752,7 @@ export const createStore = <Values extends object = DefaultFormValues>(
             if (collectionName && typeof keys === "object") {
               return {
                 externalValues: lodashMerge(cloneDeep(state.externalValues), {
-                  [collectionName]: keys.map(() => null),
+                  [collectionName]: keys.map(() => undefined),
                 }),
               };
             }
@@ -910,7 +892,7 @@ export const createStore = <Values extends object = DefaultFormValues>(
             state.actions.insertMultipleCollectionValues({
               collectionId,
               collectionName,
-            } as CollectionActionProps)(0, [value ?? null], options);
+            } as CollectionActionProps)(0, [value ?? undefined], options);
             return { collections: state.collections };
           });
         },
@@ -925,7 +907,7 @@ export const createStore = <Values extends object = DefaultFormValues>(
                 collectionName
               );
               const { newValues } = insertItemsAtIndex({
-                source: [value ?? null],
+                source: [value ?? undefined],
                 target: currentExternalValues,
                 index: -1,
               });
@@ -942,7 +924,7 @@ export const createStore = <Values extends object = DefaultFormValues>(
             state.actions.insertMultipleCollectionValues({
               collectionId,
               collectionName,
-            })(-1, [value ?? null], options);
+            })(-1, [value ?? undefined], options);
 
             return { collections: state.collections };
           });

diff --git a/packages/formiz-core/src/types.ts b/packages/formiz-core/src/types.ts
@@ -361,7 +361,6 @@ export interface Store<Values extends object = DefaultFormValues> {
       >
     ): void;
     reset(options?: ResetOptions): void;
-    resetInitialValues(): void;
 
     registerField<Value = unknown, FormattedValue = Value>(
       fieldId: string,

diff --git a/packages/formiz-core/src/utils/form.ts b/packages/formiz-core/src/utils/form.ts
@@ -160,7 +160,7 @@ export const getFieldFirstValue = ({
   if (!!newField.value) {
     return newField.value;
   }
-  if (!!oldFieldById?.value) {
+  if (oldFieldById?.value !== undefined) {
     return oldFieldById.value;
   }
   if (keepValue !== undefined) {