diff --git a/.changeset/popular-fans-hunt.md b/.changeset/popular-fans-hunt.md new file mode 100644 index 000000000..21f81e023 --- /dev/null +++ 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 index bf6eb6753..b52f59349 100644 --- a/packages/vee-validate/src/Field.ts +++ b/packages/vee-validate/src/Field.ts @@ -234,7 +234,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 index 13a282bd0..b29676259 100644 --- a/packages/vee-validate/tests/Field.spec.ts +++ b/packages/vee-validate/tests/Field.spec.ts @@ -1241,4 +1241,23 @@ describe('', () => { expect(valuesEl?.textContent).toBe('123'); }); }); + + // #4285 + test('handle blur should respect the validate on blur config', async () => { + mountWithHoc({ + template: ` + + + {{ errorMessage }} + + `, + }); + + 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); + }); });