fix: use cloned value when setting field value closes #3991

Author: logaretm

packages/vee-validate/src/useForm.ts

@@ -404,7 +404,7 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
       return;
     }
 
-    let newValue = value;
+    let newValue = clonedValue;
     // Single Checkbox: toggles the field value unless the field is being reset then force it
     if (!isFieldGroup(fieldInstance) && fieldInstance.type === 'checkbox' && !force && !RESET_LOCK) {
       newValue = deepCopy(

packages/vee-validate/tests/Form.spec.ts

@@ -1964,7 +1964,7 @@ describe('<Form />', () => {
         <Field id="password" name="password" rules="required" />
 
         <span id="meta">{{ meta.valid ? 'valid' : 'invalid' }}</span>
-        <button type="button" @click="resetForm()">Reset</button> 
+        <button type="button" @click="resetForm()">Reset</button>
       </VForm>
     `,
     });
@@ -1990,7 +1990,7 @@ describe('<Form />', () => {
         <Field id="password" name="password" rules="required" />
 
         <span id="meta">{{ meta.valid ? 'valid' : 'invalid' }}</span>
-        <button type="button" @click="resetForm({ errors: { email: 'bad' } })">Reset</button> 
+        <button type="button" @click="resetForm({ errors: { email: 'bad' } })">Reset</button>
       </VForm>
     `,
     });
@@ -2194,7 +2194,7 @@ describe('<Form />', () => {
         </Field>
 
         <span id="meta">{{ meta.touched ? 'touched' : 'untouched' }}</span>
-        <button type="submit">Submit</button> 
+        <button type="submit">Submit</button>
       </VForm>
     `,
     });
@@ -2228,7 +2228,7 @@ describe('<Form />', () => {
         <Field name="email" />
         <span id="passwordError">{{ errors.password }}</span>
 
-        <button type="submit">Submit</button> 
+        <button type="submit">Submit</button>
       </VForm>
     `,
     });
@@ -2260,7 +2260,7 @@ describe('<Form />', () => {
         <Field name="email" />
         <span id="passwordError">{{ errors.password }}</span>
 
-        <button type="submit">Submit</button> 
+        <button type="submit">Submit</button>
       </VForm>
     `,
     });
@@ -2501,7 +2501,7 @@ describe('<Form />', () => {
       },
       template: `
       <VForm>
-        <Field name="check" type="checkbox" v-model="value" value="CHECKED" /> 
+        <Field name="check" type="checkbox" v-model="value" value="CHECKED" />
       </VForm>
     `,
     });
@@ -2531,8 +2531,8 @@ describe('<Form />', () => {
       },
       template: `
       <VForm>
-        <Field name="name" type="text" v-model="value" /> 
-        <Field v-if="isHidden" name="name" type="text" v-model="value" /> 
+        <Field name="name" type="text" v-model="value" />
+        <Field v-if="isHidden" name="name" type="text" v-model="value" />
       </VForm>
     `,
     });

packages/vee-validate/tests/useForm.spec.ts

@@ -1,4 +1,4 @@
-import { FieldMeta, FormContext, useField, useForm } from '@/vee-validate';
+import { FieldMeta, FormContext, FormMeta, useField, useForm } from '@/vee-validate';
 import { mountWithHoc, setValue, flushPromises, runInSetup } from './helpers';
 import * as yup from 'yup';
 import { onMounted, Ref } from 'vue';
@@ -651,4 +651,48 @@ describe('useForm()', () => {
     await flushPromises();
     expect(meta.validated).toBe(false);
   });
+
+  // #3991
+  test('initial value should not be mutable if nested field model is used', async () => {
+    let model!: Ref<{ name: string }>;
+    let formMeta!: Ref<FormMeta<{ field: { name: string } }>>;
+    let reset!: () => void;
+
+    mountWithHoc({
+      setup() {
+        const { meta, resetForm } = useForm({
+          initialValues: { field: { name: '1' } },
+          validationSchema: yup.object({
+            name: yup.string().required(),
+          }),
+        });
+
+        const field = useField<{ name: string }>('field');
+        model = field.value;
+        formMeta = meta;
+        reset = resetForm;
+
+        return {};
+      },
+      template: `
+        <div></div>
+      `,
+    });
+
+    await flushPromises();
+    expect(formMeta.value.initialValues?.field.name).toBe('1');
+    model.value.name = 'test';
+    await flushPromises();
+    expect(model.value).toEqual({ name: 'test' });
+    expect(formMeta.value.initialValues?.field.name).toBe('1');
+    reset();
+    await flushPromises();
+    expect(model.value).toEqual({ name: '1' });
+    expect(formMeta.value.initialValues?.field.name).toBe('1');
+
+    model.value.name = 'test';
+    await flushPromises();
+    expect(model.value).toEqual({ name: 'test' });
+    expect(formMeta.value.initialValues?.field.name).toBe('1');
+  });
 });