fix: force resetForm should not merge values closes #4680 closes #4729

logaretm · May 29, 2024 · 454bc45 · 454bc45
1 parent fd008c1
commit 454bc45
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 5 deletions.
diff --git a/.changeset/sharp-glasses-wait.md b/.changeset/sharp-glasses-wait.md
@@ -0,0 +1,5 @@
+---
+"vee-validate": minor
+---
+
+fix: force resetForm should not merge values closes #4680 closes #4729
diff --git a/packages/vee-validate/src/useForm.ts b/packages/vee-validate/src/useForm.ts
@@ -817,7 +817,7 @@ export function useForm<
     let newValues = deepCopy(resetState?.values ? resetState.values : originalInitialValues.value);
     newValues = opts?.force ? newValues : merge(originalInitialValues.value, newValues);
     newValues = isTypedSchema(schema) && isCallable(schema.cast) ? schema.cast(newValues) : newValues;
-    setInitialValues(newValues);
+    setInitialValues(newValues, { force: opts?.force });
     mutateAllPathState(state => {
       state.__flags.pendingReset = true;
       state.validated = false;
@@ -1233,6 +1233,11 @@ function useFormMeta<TValues extends Record<string, unknown>>(
   });
 }
 
+interface SetFormInitialValuesOpts {
+  updateFields?: boolean;
+  force?: boolean;
+}
+
 /**
  * Manages the initial values prop
  */
@@ -1251,11 +1256,16 @@ function useFormInitialValues<TValues extends GenericObject>(
   // these only change when the user explicitly changes the initial values or when the user resets them with new values.
   const originalInitialValues = ref<PartialDeep<TValues>>(deepCopy(values)) as Ref<PartialDeep<TValues>>;
 
-  function setInitialValues(values: PartialDeep<TValues>, updateFields = false) {
-    initialValues.value = merge(deepCopy(initialValues.value) || {}, deepCopy(values));
-    originalInitialValues.value = merge(deepCopy(originalInitialValues.value) || {}, deepCopy(values));
+  function setInitialValues(values: PartialDeep<TValues>, opts?: SetFormInitialValuesOpts) {
+    if (opts?.force) {
+      initialValues.value = deepCopy(values);
+      originalInitialValues.value = deepCopy(values);
+    } else {
+      initialValues.value = merge(deepCopy(initialValues.value) || {}, deepCopy(values));
+      originalInitialValues.value = merge(deepCopy(originalInitialValues.value) || {}, deepCopy(values));
+    }
 
-    if (!updateFields) {
+    if (!opts?.updateFields) {
       return;
     }
 

diff --git a/packages/vee-validate/tests/useForm.spec.ts b/packages/vee-validate/tests/useForm.spec.ts
@@ -1316,6 +1316,37 @@ describe('useForm()', () => {
     expect(form.values.fname).toBe('test');
   });
 
+  test('reset should be able to set initial values to undefined with force: true', async () => {
+    let form!: FormContext<{ lname: string; fname: string }>;
+
+    mountWithHoc({
+      setup() {
+        form = useForm({
+          initialValues: { fname: '123', lname: '456' },
+        });
+        return {};
+      },
+      template: `<div></div>`,
+    });
+
+    await flushPromises();
+
+    // FAIL
+    form.resetForm({ values: { lname: '789' } }, { force: true });
+    expect(form.meta.value.initialValues?.fname).toBeUndefined(); // This is not undefined. It stayed at value '123'
+    expect(form.meta.value.initialValues?.lname).toBe('789');
+
+    // FAIL
+    form.resetForm({ values: {} }, { force: true });
+    expect(form.meta.value.initialValues?.fname).toBeUndefined();
+    expect(form.meta.value.initialValues?.lname).toBeUndefined();
+
+    // PASS
+    form.resetForm({ values: { lname: undefined, fname: undefined } }, { force: true });
+    expect(form.meta.value.initialValues?.fname).toBeUndefined();
+    expect(form.meta.value.initialValues?.lname).toBeUndefined();
+  });
+
   test('reset should not make unspecified values undefined', async () => {
     let form!: FormContext<{ fname: string; lname: string }>;