feat: allow handleBlur to run validations optionally

logaretm · Jun 5, 2023 · d4fafc9 · d4fafc9
1 parent 3e4a7c1
commit d4fafc9
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 12 deletions.
diff --git a/.changeset/little-kings-perform.md b/.changeset/little-kings-perform.md
@@ -0,0 +1,5 @@
+---
+'vee-validate': minor
+---
+
+"feat: allow handleBlur to run validations"
diff --git a/packages/vee-validate/src/Field.ts b/packages/vee-validate/src/Field.ts
@@ -161,14 +161,10 @@ const FieldImpl = /** #__PURE__ */ defineComponent({
         resolveValidationTriggers(props);
 
       function baseOnBlur(e: Event) {
-        handleBlur(e);
+        handleBlur(e, validateOnBlur);
         if (isCallable(ctx.attrs.onBlur)) {
           ctx.attrs.onBlur(e);
         }
-
-        if (validateOnBlur) {
-          validateField();
-        }
       }
 
       function baseOnInput(e: Event | unknown) {

diff --git a/packages/vee-validate/src/types/forms.ts b/packages/vee-validate/src/types/forms.ts
@@ -137,7 +137,7 @@ export interface PrivateFieldContext<TValue = unknown> {
   handleReset(): void;
   validate: FieldValidator;
   handleChange(e: Event | unknown, shouldValidate?: boolean): void;
-  handleBlur(e?: Event): void;
+  handleBlur(e?: Event, shouldValidate?: boolean): void;
   setState(state: Partial<FieldState<TValue>>): void;
   setTouched(isTouched: boolean): void;
   setErrors(message: string | string[]): void;

diff --git a/packages/vee-validate/src/useField.ts b/packages/vee-validate/src/useField.ts
@@ -159,8 +159,11 @@ function _useField<TValue = unknown>(
   /**
    * Handles common onBlur meta update
    */
-  const handleBlur = () => {
+  const handleBlur = (evt?: unknown, shouldValidate = false) => {
     meta.touched = true;
+    if (shouldValidate) {
+      validateWithStateMutation();
+    }
   };
 
   async function validateCurrentValue(mode: SchemaValidationMode) {
@@ -259,11 +262,6 @@ function _useField<TValue = unknown>(
 
   function setValue(newValue: TValue, shouldValidate = true) {
     value.value = newValue;
-    if (!shouldValidate) {
-      validateValidStateOnly();
-      return;
-    }
-
     const validateFn = shouldValidate ? validateWithStateMutation : validateValidStateOnly;
     validateFn();
   }