From c90b2ebb7ed7ea933ba38931cff6cb2feb9c67ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 13 Nov 2024 22:15:59 +0800 Subject: [PATCH 1/2] fix(form): event blur not trigger validate --- src/form/form-item.tsx | 10 ++++++++++ src/input/input.tsx | 7 +++++-- src/textarea/textarea.tsx | 5 ++++- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/form/form-item.tsx b/src/form/form-item.tsx index 8bb926257..611135395 100644 --- a/src/form/form-item.tsx +++ b/src/form/form-item.tsx @@ -5,6 +5,7 @@ import { nextTick, onBeforeUnmount, onMounted, + provide, reactive, ref, toRefs, @@ -37,6 +38,7 @@ import { ErrorListType, FormInjectionKey, FormItemContext, + FormItemInjectionKey, SuccessListType, ValidateStatus, } from './const'; @@ -312,6 +314,14 @@ export default defineComponent({ }, ); + const handleBlur = async () => { + await validateHandler('blur'); + }; + + provide(FormItemInjectionKey, { + handleBlur, + }); + return () => { const renderRightIconContent = () => { if (!props.arrow) { diff --git a/src/input/input.tsx b/src/input/input.tsx index f6c47f05a..765583f7f 100644 --- a/src/input/input.tsx +++ b/src/input/input.tsx @@ -1,4 +1,4 @@ -import { PropType, ref, computed, defineComponent, nextTick, watch } from 'vue'; +import { PropType, ref, computed, defineComponent, nextTick, watch, inject } from 'vue'; import { BrowseIcon as TBrowseIcon, BrowseOffIcon as TBrowseOffIcon, @@ -9,6 +9,7 @@ import config from '../config'; import InputProps from './props'; import { InputValue, TdInputProps } from './type'; import { getCharacterLength, useDefault, extendAPI } from '../shared'; +import { FormItemInjectionKey } from '../form/const'; import { useFormDisabled } from '../form/hooks'; import { usePrefixClass } from '../hooks/useClass'; import { useTNodeJSX } from '../hooks/tnode'; @@ -45,6 +46,7 @@ export default defineComponent({ const status = props.status || 'default'; const renderType = ref(props.type); const focused = ref(false); + const formItem = inject(FormItemInjectionKey, undefined); const inputClasses = computed(() => [ `${inputClass.value}__control`, @@ -133,18 +135,19 @@ export default defineComponent({ const handleBlur = (e: FocusEvent) => { focused.value = false; - // 失焦时处理 format if (isFunction(props.format)) { innerValue.value = props.format(innerValue.value); nextTick(() => { setInputValue(innerValue.value); props.onBlur?.(innerValue.value, { e }); + formItem.handleBlur(); }); return; } props.onBlur?.(innerValue.value, { e }); + formItem.handleBlur(); }; const handleCompositionend = (e: CompositionEvent) => { diff --git a/src/textarea/textarea.tsx b/src/textarea/textarea.tsx index 3e2c980f3..fc5c6e7fd 100644 --- a/src/textarea/textarea.tsx +++ b/src/textarea/textarea.tsx @@ -1,9 +1,10 @@ -import { computed, ref, onMounted, defineComponent, toRefs, nextTick, watch } from 'vue'; +import { computed, ref, onMounted, defineComponent, toRefs, nextTick, watch, inject } from 'vue'; import { getCharacterLength, useVModel } from '../shared'; import config from '../config'; import props from './props'; import { TextareaValue } from './type'; import calcTextareaHeight from '../_common/js/utils/calcTextareaHeight'; +import { FormItemInjectionKey } from '../form/const'; import { useFormDisabled } from '../form/hooks'; import { usePrefixClass } from '../hooks/useClass'; import { useTNodeJSX } from '../hooks/tnode'; @@ -16,6 +17,7 @@ export default defineComponent({ setup(props, context) { const renderTNodeJSX = useTNodeJSX(); const isDisabled = useFormDisabled(); + const formItem = inject(FormItemInjectionKey, undefined); const textareaClass = usePrefixClass('textarea'); @@ -107,6 +109,7 @@ export default defineComponent({ props.onFocus?.(innerValue.value, { e }); }; const handleBlur = (e: FocusEvent) => { + formItem.handleBlur(); props.onBlur?.(innerValue.value, { e }); }; From dde347e43e80d82c634b513bd749e402fc2c52ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 13 Nov 2024 23:34:03 +0800 Subject: [PATCH 2/2] fix: cannot read properties of undefined (reading 'handleBlur') --- src/input/input.tsx | 4 ++-- src/textarea/textarea.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/input/input.tsx b/src/input/input.tsx index 765583f7f..ff15bd50c 100644 --- a/src/input/input.tsx +++ b/src/input/input.tsx @@ -141,13 +141,13 @@ export default defineComponent({ nextTick(() => { setInputValue(innerValue.value); props.onBlur?.(innerValue.value, { e }); - formItem.handleBlur(); + formItem?.handleBlur(); }); return; } props.onBlur?.(innerValue.value, { e }); - formItem.handleBlur(); + formItem?.handleBlur(); }; const handleCompositionend = (e: CompositionEvent) => { diff --git a/src/textarea/textarea.tsx b/src/textarea/textarea.tsx index fc5c6e7fd..53188ffcf 100644 --- a/src/textarea/textarea.tsx +++ b/src/textarea/textarea.tsx @@ -109,7 +109,7 @@ export default defineComponent({ props.onFocus?.(innerValue.value, { e }); }; const handleBlur = (e: FocusEvent) => { - formItem.handleBlur(); + formItem?.handleBlur(); props.onBlur?.(innerValue.value, { e }); };