diff --git a/apps/examples/cypress/e2e/collection.cy.ts b/apps/examples/cypress/e2e/collection.cy.ts index 6fc8d7e9..763c4583 100644 --- a/apps/examples/cypress/e2e/collection.cy.ts +++ b/apps/examples/cypress/e2e/collection.cy.ts @@ -92,6 +92,20 @@ describe("Collection", () => { cy.field("members[1].company").hasValue("Initial Company (2)"); }); + it("Default values", () => { + cy.get("button").contains("Display").click(); + + cy.field("conditioned[0]").hasValue("default value"); + cy.field("conditioned[1]").should("not.exist"); + + cy.get("button").contains("Add item").click(); + + cy.field("conditioned[1]").should("exist"); + + cy.get("button").contains("Reset form").click(); + cy.field("conditioned[1]").should("not.exist"); + }); + it("Reset with new members", () => { cy.field("members[0].name").hasValue("Default name (1)"); cy.field("members[0].company").hasValue("Initial Company (1)"); diff --git a/apps/examples/src/pages/collection.tsx b/apps/examples/src/pages/collection.tsx index 4cb9d4b5..7d495e5c 100644 --- a/apps/examples/src/pages/collection.tsx +++ b/apps/examples/src/pages/collection.tsx @@ -23,7 +23,6 @@ import { useState } from "react"; const DEFAULT_VALUES = { members: [{ name: "Default name (1)" }, { company: "Default company (2)" }], }; - const INITIAL_VALUES = { members: [ { company: "Initial Company (1)" }, @@ -290,7 +289,9 @@ const Collection = () => { }; const ConditionedCollection = () => { - const conditionedCollection = useCollection("conditioned"); + const conditionedCollection = useCollection("conditioned", { + defaultValue: ["default value"], + }); return ( diff --git a/packages/formiz-core/src/store.ts b/packages/formiz-core/src/store.ts index 800bbe44..53756c27 100644 --- a/packages/formiz-core/src/store.ts +++ b/packages/formiz-core/src/store.ts @@ -242,15 +242,23 @@ export const createStore = ( collection.name ) as NullablePartial[]; + const storeResetDefaultValue = getValueByFieldName( + state.resetDefaultValues, + collection.name + ); + + const resetKeys = + (collectionFields ?? storeResetDefaultValue)?.map( + (_, index) => collection.keys?.[index] ?? index.toString() + ) ?? []; + state.collections.set(collectionId, { name: collection.name, isPristine: isResetAllowed("pristine", resetOptions) ? true : state.collections.get(collectionId)?.isPristine ?? true, keys: isResetAllowed("values", resetOptions) - ? collectionFields?.map( - (_, index) => collection.keys?.[index] ?? index.toString() - ) ?? [] + ? resetKeys : state.collections.get(collectionId)?.keys ?? [], }); }); @@ -713,7 +721,7 @@ export const createStore = ( }; state.collections.set(collectionId, { - ...newCollection, + name: newCollection.name, keys: getKeys(), isPristine: oldCollectionById?.isPristine ?? true, }); diff --git a/packages/formiz-core/src/useCollection.ts b/packages/formiz-core/src/useCollection.ts index 2a8725bb..0e24701d 100644 --- a/packages/formiz-core/src/useCollection.ts +++ b/packages/formiz-core/src/useCollection.ts @@ -72,6 +72,12 @@ export const useCollection = ( ); } + if (!initialValues && !!defaultValue && !Array.isArray(defaultValue)) { + console.error( + `Default value for the collection "${name}" is not an array! Fallback to an empty array.` + ); + } + const initialValuesArray = Array.isArray(initialValues) ? initialValues : Array.isArray(defaultValue) diff --git a/packages/formiz-core/src/useForm.tsx b/packages/formiz-core/src/useForm.tsx index d4eb572a..05410692 100644 --- a/packages/formiz-core/src/useForm.tsx +++ b/packages/formiz-core/src/useForm.tsx @@ -58,8 +58,12 @@ export const useForm = ( } }, [formActions, formConfig?.ready]); + const formStateRef = useRef(formState); + formStateRef.current = formState; useEffect(() => { - formActions.updateConfig(formConfigRef); + if (formConfig?.id && formConfig.id !== formStateRef.current.id) { + formActions.updateConfig(formConfigRef); + } }, [formActions, formConfig?.id]); return formState;