fix: component blur event and respect model update config closes #4346

Author: logaretm

.changeset/brown-planes-shave.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fix: component blur event and respect model update config closes #4346

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;

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>`,
 };
 

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');