fix: don't mutate validated meta when silent validation closes #3981 c…

…loses #3982
logaretm · Nov 2, 2022 · 6652a22 · 6652a22
1 parent 99cf2f5
commit 6652a22
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/packages/vee-validate/src/useForm.ts b/packages/vee-validate/src/useForm.ts
@@ -663,9 +663,13 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
   }
 
   async function validate(opts?: Partial<ValidationOptions>): Promise<FormValidationResult<TValues>> {
-    mutateAllFields(f => (f.meta.validated = true));
+    const mode = opts?.mode || 'force';
+    if (mode === 'force') {
+      mutateAllFields(f => (f.meta.validated = true));
+    }
+
     if (formCtx.validateSchema) {
-      return formCtx.validateSchema(opts?.mode || 'force');
+      return formCtx.validateSchema(mode);
     }
 
     // No schema, each field is responsible to validate itself

diff --git a/packages/vee-validate/tests/useForm.spec.ts b/packages/vee-validate/tests/useForm.spec.ts
@@ -1,4 +1,4 @@
-import { FormContext, useField, useForm } from '@/vee-validate';
+import { FieldMeta, FormContext, useField, useForm } from '@/vee-validate';
 import { mountWithHoc, setValue, flushPromises, runInSetup } from './helpers';
 import * as yup from 'yup';
 import { onMounted, Ref } from 'vue';
@@ -620,4 +620,35 @@ describe('useForm()', () => {
       })
     );
   });
+
+  // #3981 #3982
+  test('fields validated meta should not be mutated when silently validating fields', async () => {
+    let meta!: FieldMeta<any>;
+
+    mountWithHoc({
+      setup() {
+        const { validate } = useForm({
+          validationSchema: yup.object({
+            name: yup.string().required(),
+          }),
+        });
+
+        const field = useField('name');
+        meta = field.meta;
+
+        onMounted(() => {
+          validate({ mode: 'silent' });
+          validate({ mode: 'validated-only' });
+        });
+
+        return {};
+      },
+      template: `
+        <div></div>
+      `,
+    });
+
+    await flushPromises();
+    expect(meta.validated).toBe(false);
+  });
 });