fix: use flags to avoid validating during reset #4404 #4467

Author: logaretm

.changeset/short-points-attack.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fix: use flags to avoid validating during reset #4404 #4467

packages/vee-validate/src/types/forms.ts

@@ -99,6 +99,7 @@ export interface PathState<TValue = unknown> {
   fieldsCount: number;
   __flags: {
     pendingUnmount: Record<string, boolean>;
+    pendingReset: boolean;
   };
   validate?: FieldValidator;
 }

packages/vee-validate/src/useField.ts

@@ -155,7 +155,12 @@ function _useField<TValue = unknown>(
   const errorMessage = computed(() => errors.value[0]);
 
   if (syncVModel) {
-    useVModel({ value, prop: syncVModel, handleChange, validateOnModelUpdate: !!opts?.validateOnValueUpdate });
+    useVModel({
+      value,
+      prop: syncVModel,
+      handleChange,
+      shouldValidate: () => validateOnValueUpdate && !flags.pendingReset,
+    });
   }
 
   /**
@@ -554,10 +559,10 @@ interface ModelOpts<TValue> {
   prop: string | boolean;
   value: Ref<TValue>;
   handleChange: FieldContext['handleChange'];
-  validateOnModelUpdate: boolean;
+  shouldValidate: () => boolean;
 }
 
-function useVModel<TValue = unknown>({ prop, value, handleChange, validateOnModelUpdate }: ModelOpts<TValue>) {
+function useVModel<TValue = unknown>({ prop, value, handleChange, shouldValidate }: ModelOpts<TValue>) {
   const vm = getCurrentInstance();
   /* istanbul ignore next */
   if (!vm || !prop) {
@@ -595,7 +600,7 @@ function useVModel<TValue = unknown>({ prop, value, handleChange, validateOnMode
         return;
       }
 
-      handleChange(newValue, validateOnModelUpdate);
+      handleChange(newValue, shouldValidate());
     },
   );
 }

packages/vee-validate/src/useFieldState.ts

@@ -63,7 +63,7 @@ export function useFieldState<TValue = unknown>(
       value,
       initialValue,
       meta,
-      flags: { pendingUnmount: { [id]: false } },
+      flags: { pendingUnmount: { [id]: false }, pendingReset: false },
       errors,
       setState,
     };

packages/vee-validate/src/useForm.ts

@@ -309,6 +309,7 @@ export function useForm<
       multiple: false,
       __flags: {
         pendingUnmount: { [id]: false },
+        pendingReset: false,
       },
       fieldsCount: 1,
       validate: config?.validate,
@@ -733,11 +734,21 @@ export function useForm<
 
   function resetField(field: Path<TValues>, state?: Partial<FieldState>) {
     const newValue = state && 'value' in state ? state.value : getFromPath(initialValues.value, field);
+    const pathState = findPathState(field);
+    if (pathState) {
+      pathState.__flags.pendingReset = true;
+    }
 
     setFieldInitialValue(field, deepCopy(newValue));
     setFieldValue(field, newValue as PathValue<TValues, typeof field>, false);
     setFieldTouched(field, state?.touched ?? false);
     setFieldError(field, state?.errors || []);
+
+    nextTick(() => {
+      if (pathState) {
+        pathState.__flags.pendingReset = false;
+      }
+    });
   }
 
   /**
@@ -748,6 +759,7 @@ export function useForm<
     newValues = isTypedSchema(schema) && isCallable(schema.cast) ? schema.cast(newValues) : newValues;
     setInitialValues(newValues);
     mutateAllPathState(state => {
+      state.__flags.pendingReset = true;
       state.validated = false;
       state.touched = resetState?.touched?.[state.path as Path<TValues>] || false;
 
@@ -760,6 +772,10 @@ export function useForm<
     submitCount.value = resetState?.submitCount || 0;
     nextTick(() => {
       validate({ mode: 'silent' });
+
+      mutateAllPathState(state => {
+        state.__flags.pendingReset = false;
+      });
     });
   }