fix: handleBlur should respect blur validate config closes #4285

logaretm · May 31, 2023 · 6e074f7 · 6e074f7
1 parent fb9a0da
commit 6e074f7
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/.changeset/popular-fans-hunt.md b/.changeset/popular-fans-hunt.md
@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fix: handleBlur should respect blur validate config closes #4285
diff --git a/packages/vee-validate/src/Field.ts b/packages/vee-validate/src/Field.ts
@@ -233,7 +233,7 @@ const FieldImpl = /** #__PURE__ */ defineComponent({
         handleChange: onChangeHandler,
         handleInput: e => onChangeHandler(e, false),
         handleReset,
-        handleBlur,
+        handleBlur: sharedProps.value.onBlur,
         setTouched,
         setErrors,
       };

diff --git a/packages/vee-validate/tests/Field.spec.ts b/packages/vee-validate/tests/Field.spec.ts
@@ -1241,4 +1241,23 @@ describe('<Field />', () => {
       expect(valuesEl?.textContent).toBe('123');
     });
   });
+
+  // #4285
+  test('handle blur should respect the validate on blur config', async () => {
+    mountWithHoc({
+      template: `
+        <Field name="field" rules="required" v-slot="{ errorMessage, handleBlur }" validateOnBlur>
+          <input @blur="handleBlur" />
+          <span>{{ errorMessage }}</span>
+        </Field>
+      `,
+    });
+
+    await flushPromises();
+    const input = document.querySelector('input') as HTMLInputElement;
+    const error = document.querySelector('span') as HTMLInputElement;
+    dispatchEvent(input, 'blur');
+    await flushPromises();
+    expect(error.textContent).toBe(REQUIRED_MESSAGE);
+  });
 });