From 6a1dc9bdc263c3b0582c8b5e635dab06f94041e7 Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <logaretm1@gmail.com>
Date: Tue, 4 Jul 2023 02:38:28 +0300
Subject: [PATCH] fix: component blur event and respect model update config
 closes #4346

---
 .changeset/brown-planes-shave.md                 |  5 +++++
 packages/vee-validate/src/useForm.ts             |  7 ++-----
 packages/vee-validate/tests/helpers/ModelComp.ts |  2 +-
 packages/vee-validate/tests/useForm.spec.ts      | 11 ++++++++---
 4 files changed, 16 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/brown-planes-shave.md

diff --git a/.changeset/brown-planes-shave.md b/.changeset/brown-planes-shave.md
new file mode 100644
index 000000000..de62c2f68
--- /dev/null
+++ b/.changeset/brown-planes-shave.md
@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fix: component blur event and respect model update config closes #4346
diff --git a/packages/vee-validate/src/useForm.ts b/packages/vee-validate/src/useForm.ts
index 2338cbec6..0b846c489 100644
--- a/packages/vee-validate/src/useForm.ts
+++ b/packages/vee-validate/src/useForm.ts
@@ -872,11 +872,8 @@ export function useForm<
     }
 
     function onUpdateModelValue(value: TValue) {
-      setFieldValue(pathState.path as Path<TValues>, value as PathValue<TValues, TPath>);
       const validateOnModelUpdate = evalConfig().validateOnModelUpdate ?? getConfig().validateOnModelUpdate;
-      if (validateOnModelUpdate) {
-        validateField(pathState.path as Path<TValues>);
-      }
+      setFieldValue(pathState.path as Path<TValues>, value as PathValue<TValues, TPath>, validateOnModelUpdate);
     }
 
     const props = computed(() => {
@@ -894,13 +891,13 @@ export function useForm<
 
       const model = config?.model || 'modelValue';
       const base = {
+        onBlur,
         [model]: pathState.value,
         [`onUpdate:${model}`]: onUpdateModelValue,
       };
 
       if (config?.mapProps) {
         return {
-          onBlur,
           ...base,
           ...config.mapProps(omit(pathState, PRIVATE_PATH_STATE_KEYS)),
         } as BaseComponentBinds<TValue> & TExtras;
diff --git a/packages/vee-validate/tests/helpers/ModelComp.ts b/packages/vee-validate/tests/helpers/ModelComp.ts
index 71a900641..b44a8cf0b 100644
--- a/packages/vee-validate/tests/helpers/ModelComp.ts
+++ b/packages/vee-validate/tests/helpers/ModelComp.ts
@@ -2,7 +2,7 @@ export const ModelComp = {
   props: ['modelValue', 'name', 'test'],
   emits: ['blur', 'update:modelValue'],
   inheritAttrs: false,
-  template: `<input type="text" :name="name" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" @blur="$emit('blur')">
+  template: `<input type="text" :name="name" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" @blur="$emit('blur');console.log(modelValue, '____' + modelValue + '____' )">
   <div v-if="test">{{ test }}</div>`,
 };
 
diff --git a/packages/vee-validate/tests/useForm.spec.ts b/packages/vee-validate/tests/useForm.spec.ts
index 404d8a523..3c1c941bd 100644
--- a/packages/vee-validate/tests/useForm.spec.ts
+++ b/packages/vee-validate/tests/useForm.spec.ts
@@ -840,7 +840,7 @@ describe('useForm()', () => {
             }),
           });
 
-          const field = defineComponentBinds('name', { validateOnModelUpdate: true });
+          const field = defineComponentBinds('name', { validateOnModelUpdate: false });
 
           return { field, values, errors };
         },
@@ -854,10 +854,15 @@ describe('useForm()', () => {
       await flushPromises();
       const errorEl = document.getElementById('errors');
       const valuesEl = document.getElementById('values');
-      setValue(document.querySelector('input') as any, '');
+      const input = document.querySelector('input') as HTMLInputElement;
+      setValue(input, '');
+      await flushPromises();
+      expect(errorEl?.textContent).toBe('');
+      dispatchEvent(input, 'blur');
       await flushPromises();
       expect(errorEl?.textContent).toBe('name is a required field');
-      setValue(document.querySelector('input') as any, '123');
+      setValue(input, '123');
+      dispatchEvent(input, 'blur');
       await flushPromises();
       expect(errorEl?.textContent).toBe('');
       expect(valuesEl?.textContent).toBe('123');