fix(form): fix event blur not trigger validate (#1640)

* fix(form): event blur not trigger validate * fix: cannot read properties of undefined (reading 'handleBlur')
Tencent · Nov 19, 2024 · 535e486 · 535e486
1 parent 0148499
commit 535e486
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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 });
     };