fix(SelectInput): ensure onBlur can trigger when set popupVisible (#3838)

RylanBot · web-flow · commit d40540c528ea · 2025-09-29T15:01:07.000+08:00
* fix(SelectInput): ensure `onBlur` can trigger when set `popupVisible`

* fix(Cascader): pass `tagInputValue` to onBlur callback when `multiple`

* fix(SelectInput): handle onBlur for cases without panel

* fix(SelectInput): improve blur handling

* chore: clarify comment on blur handling
diff --git a/packages/components/cascader/Cascader.tsx b/packages/components/cascader/Cascader.tsx
@@ -206,6 +206,7 @@ const Cascader: React.FC<CascaderProps> = (originalProps) => {
           value: cascaderContext.value,
           e: context.e,
           inputValue: inputVal,
+          ...(props.multiple ? { tagInputValue: context.tagInputValue } : {}),
         });
         props?.selectInputProps?.onBlur?.(val, context);
       }}
diff --git a/packages/components/select-input/SelectInput.tsx b/packages/components/select-input/SelectInput.tsx
@@ -1,33 +1,42 @@
-import React, { useRef, useImperativeHandle } from 'react';
+import React, { useImperativeHandle, useRef } from 'react';
+
 import classNames from 'classnames';
+
 import useConfig from '../hooks/useConfig';
-import Popup, { PopupRef, PopupVisibleChangeContext } from '../popup';
-import useSingle from './useSingle';
+import useDefaultProps from '../hooks/useDefaultProps';
+import Popup, { type PopupRef, type PopupVisibleChangeContext } from '../popup';
+import { selectInputDefaultProps } from './defaultProps';
 import useMultiple from './useMultiple';
 import useOverlayInnerStyle from './useOverlayInnerStyle';
-import { TdSelectInputProps } from './type';
-import { StyledProps } from '../common';
-import { selectInputDefaultProps } from './defaultProps';
-import useDefaultProps from '../hooks/useDefaultProps';
-import { InputRef } from '../input';
+import useSingle from './useSingle';
+
+import type { StyledProps } from '../common';
+import type { InputRef } from '../input';
+import type { TdSelectInputProps } from './type';
 
 export interface SelectInputProps extends TdSelectInputProps, StyledProps {
   updateScrollTop?: (content: HTMLDivElement) => void;
   options?: any[]; // 参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
 }
 
 const SelectInput = React.forwardRef<Partial<PopupRef & InputRef>, SelectInputProps>((originalProps, ref) => {
+  const { classPrefix: prefix } = useConfig();
+
   const props = useDefaultProps<SelectInputProps>(originalProps, selectInputDefaultProps);
+  const { multiple, value, popupVisible, popupProps, borderless, disabled } = props;
+
   const selectInputRef = useRef<PopupRef>(null);
   const selectInputWrapRef = useRef<HTMLDivElement>(null);
-  const { classPrefix: prefix } = useConfig();
-  const { multiple, value, popupVisible, popupProps, borderless, disabled } = props;
+
   const { commonInputProps, inputRef, singleInputValue, onInnerClear, renderSelectSingle } = useSingle(props);
-  const { tagInputRef, multipleInputValue, renderSelectMultiple } = useMultiple(props);
+  const { tagInputRef, tags, multipleInputValue, renderSelectMultiple } = useMultiple(props);
 
-  const { tOverlayInnerStyle, innerPopupVisible, onInnerPopupVisibleChange } = useOverlayInnerStyle(props, {
-    afterHidePopup: onInnerBlur,
-  });
+  const { tOverlayInnerStyle, innerPopupVisible, onInnerPopupVisibleChange, skipNextBlur } = useOverlayInnerStyle(
+    props,
+    {
+      afterHidePopup: onInnerBlur,
+    },
+  );
 
   const popupClasses = classNames([
     props.className,
@@ -49,11 +58,16 @@ const SelectInput = React.forwardRef<Partial<PopupRef & InputRef>, SelectInputPr
   // 浮层显示的受控与非受控
   const visibleProps = { visible: popupVisible ?? innerPopupVisible };
 
-  // SelectInput.blur is not equal to Input or TagInput, example: click popup panel.
-  // if trigger blur on click popup panel, filter data of tree select can not be checked.
+  /* SelectInput 与普通 Input 的 blur 事件触发时机不同
+    该组件的 blur 事件在 popup 隐藏时才触发，避免点击浮层内容时触发 blur 事件 */
   function onInnerBlur(ctx: PopupVisibleChangeContext) {
+    if (skipNextBlur.current) return;
     const inputValue = props.multiple ? multipleInputValue : singleInputValue;
-    const params: Parameters<TdSelectInputProps['onBlur']>[1] = { e: ctx.e, inputValue };
+    const params: Parameters<TdSelectInputProps['onBlur']>[1] = {
+      e: ctx.e,
+      inputValue,
+      ...(props.multiple && { tagInputValue: tags }),
+    };
     props.onBlur?.(props.value, params);
   }
 
@@ -76,11 +90,12 @@ const SelectInput = React.forwardRef<Partial<PopupRef & InputRef>, SelectInputPr
         {multiple
           ? renderSelectMultiple({
               commonInputProps,
-              onInnerClear,
               popupVisible: visibleProps.visible,
               allowInput: props.allowInput,
+              onInnerClear,
+              onInnerBlur,
             })
-          : renderSelectSingle(visibleProps.visible)}
+          : renderSelectSingle(visibleProps.visible, onInnerBlur)}
       </Popup>
     </div>
   );
diff --git a/packages/components/select-input/useMultiple.tsx b/packages/components/select-input/useMultiple.tsx
@@ -1,19 +1,23 @@
-import React, { useRef, MouseEvent } from 'react';
-import { isObject } from 'lodash-es';
+import React, { useRef } from 'react';
+
 import classNames from 'classnames';
-import { TdSelectInputProps, SelectInputChangeContext, SelectInputKeys, SelectInputValue } from './type';
-import TagInput, { TagInputValue } from '../tag-input';
-import { SelectInputCommonProperties } from './interface';
-import useControlled from '../hooks/useControlled';
+import { isObject } from 'lodash-es';
+
 import useConfig from '../hooks/useConfig';
-import { InputRef } from '../input';
-import { StyledProps } from '../common';
+import useControlled from '../hooks/useControlled';
+import TagInput, { type TagInputValue } from '../tag-input';
+
+import type { StyledProps } from '../common';
+import type { InputRef } from '../input';
+import type { SelectInputCommonProperties } from './interface';
+import type { SelectInputChangeContext, SelectInputKeys, SelectInputValue, TdSelectInputProps } from './type';
 
 export interface RenderSelectMultipleParams {
   commonInputProps: SelectInputCommonProperties;
-  onInnerClear: (context: { e: MouseEvent<SVGElement> }) => void;
   popupVisible: boolean;
   allowInput: boolean;
+  onInnerClear: (context: { e: React.MouseEvent<SVGElement> }) => void;
+  onInnerBlur?: (context: { e: React.FocusEvent<HTMLInputElement> }) => void;
 }
 
 const DEFAULT_KEYS = {
@@ -29,8 +33,12 @@ export interface SelectInputProps extends TdSelectInputProps, StyledProps {
 export default function useMultiple(props: SelectInputProps) {
   const { value } = props;
   const { classPrefix } = useConfig();
-  const tagInputRef = useRef<InputRef>(null);
+
   const [tInputValue, setTInputValue] = useControlled(props, 'inputValue', props.onInputChange);
+
+  const tagInputRef = useRef<InputRef>(null);
+  const blurTimeoutRef = useRef(null);
+
   const iKeys: SelectInputKeys = { ...DEFAULT_KEYS, ...props.keys };
 
   const getTags = () => {
@@ -51,44 +59,72 @@ export default function useMultiple(props: SelectInputProps) {
     props.onTagChange?.(val, context);
   };
 
-  const renderSelectMultiple = (p: RenderSelectMultipleParams) => (
-    <TagInput
-      ref={tagInputRef}
-      {...p.commonInputProps}
-      autoWidth={props.autoWidth}
-      readonly={props.readonly}
-      minCollapsedNum={props.minCollapsedNum}
-      collapsedItems={props.collapsedItems}
-      tag={props.tag}
-      valueDisplay={props.valueDisplay}
-      placeholder={tPlaceholder}
-      options={props.options}
-      value={tags}
-      inputValue={p.popupVisible && p.allowInput ? tInputValue : ''}
-      onChange={onTagInputChange}
-      onInputChange={(val, context) => {
-        // 筛选器统一特性：筛选器按下回车时不清空输入框
-        if (context?.trigger === 'enter' || context?.trigger === 'blur') return;
-        setTInputValue(val, { trigger: context.trigger, e: context.e });
-      }}
-      tagProps={props.tagProps}
-      onClear={p.onInnerClear}
-      // [Important Info]: SelectInput.blur is not equal to TagInput, example: click popup panel
-      onFocus={(val, context) => {
-        props.onFocus?.(props.value, { ...context, tagInputValue: val });
-      }}
-      onBlur={!props.panel ? props.onBlur : null}
-      {...props.tagInputProps}
-      inputProps={{
-        ...props.inputProps,
-        readonly: !props.allowInput || props.readonly,
-        inputClass: classNames(props.tagInputProps?.className, {
-          [`${classPrefix}-input--focused`]: p.popupVisible,
-          [`${classPrefix}-is-focused`]: p.popupVisible,
-        }),
-      }}
-    />
-  );
+  const renderSelectMultiple = (p: RenderSelectMultipleParams) => {
+    const handleBlur = (value: SelectInputValue, context: { e: React.FocusEvent<HTMLInputElement> }) => {
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+      }
+      // 强制把 popupVisible 设置为 false 时，点击 input，会出现 blur -> focus 的情况，因此忽略前面短暂的 blur 事件
+      blurTimeoutRef.current = setTimeout(() => {
+        if (blurTimeoutRef.current) {
+          if (!p.popupVisible) {
+            p.onInnerBlur(context);
+          } else if (!props.panel) {
+            props.onBlur?.(value, { e: context.e, inputValue: tInputValue, tagInputValue: tags });
+          }
+        }
+        blurTimeoutRef.current = null;
+      }, 150);
+    };
+
+    const handleFocus = (
+      val: TagInputValue,
+      context: { e: React.FocusEvent<HTMLInputElement>; inputValue: string },
+    ) => {
+      if (blurTimeoutRef.current) {
+        clearTimeout(blurTimeoutRef.current);
+        blurTimeoutRef.current = null;
+      }
+      props.onFocus?.(props.value, { ...context, tagInputValue: val });
+    };
+
+    return (
+      <TagInput
+        ref={tagInputRef}
+        {...p.commonInputProps}
+        autoWidth={props.autoWidth}
+        readonly={props.readonly}
+        minCollapsedNum={props.minCollapsedNum}
+        collapsedItems={props.collapsedItems}
+        tag={props.tag}
+        valueDisplay={props.valueDisplay}
+        placeholder={tPlaceholder}
+        options={props.options}
+        value={tags}
+        inputValue={p.popupVisible && p.allowInput ? tInputValue : ''}
+        onChange={onTagInputChange}
+        onInputChange={(val, context) => {
+          // 筛选器统一特性：筛选器按下回车时不清空输入框
+          if (context?.trigger === 'enter' || context?.trigger === 'blur') return;
+          setTInputValue(val, { trigger: context.trigger, e: context.e });
+        }}
+        tagProps={props.tagProps}
+        onClear={p.onInnerClear}
+        // [Important Info]: SelectInput.blur is not equal to TagInput, example: click popup panel
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        {...props.tagInputProps}
+        inputProps={{
+          ...props.inputProps,
+          readonly: !props.allowInput || props.readonly,
+          inputClass: classNames(props.tagInputProps?.className, {
+            [`${classPrefix}-input--focused`]: p.popupVisible,
+            [`${classPrefix}-is-focused`]: p.popupVisible,
+          }),
+        }}
+      />
+    );
+  };
 
   return {
     tags,
diff --git a/packages/components/select-input/useOverlayInnerStyle.ts b/packages/components/select-input/useOverlayInnerStyle.ts
@@ -1,10 +1,10 @@
-import React, { useMemo } from 'react';
-import { isObject, isFunction } from 'lodash-es';
+import { isFunction, isObject } from 'lodash-es';
+import React, { useMemo, useRef } from 'react';
 
 import useControlled from '../hooks/useControlled';
 
-import { TdSelectInputProps } from './type';
-import { TdPopupProps, PopupVisibleChangeContext } from '../popup';
+import type { PopupVisibleChangeContext, TdPopupProps } from '../popup';
+import type { TdSelectInputProps } from './type';
 
 export type overlayStyleProps = Pick<
   TdSelectInputProps,
@@ -30,6 +30,8 @@ export default function useOverlayInnerStyle(
   const { popupProps, autoWidth, readonly, disabled, onPopupVisibleChange, allowInput } = props;
   const [innerPopupVisible, setInnerPopupVisible] = useControlled(props, 'popupVisible', onPopupVisibleChange);
 
+  const skipNextBlur = useRef(false);
+
   const matchWidthFunc = (triggerElement: HTMLElement, popupElement: HTMLElement) => {
     if (!triggerElement || !popupElement) return;
 
@@ -69,15 +71,15 @@ export default function useOverlayInnerStyle(
   };
 
   const onInnerPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
-    if (disabled || readonly) {
-      return;
-    }
+    skipNextBlur.current = false;
+    if (disabled || readonly) return;
     // 如果点击触发元素（输入框）且为可输入状态，则继续显示下拉框
     const newVisible = context.trigger === 'trigger-element-click' && allowInput ? true : visible;
     if (props.popupVisible !== newVisible) {
       setInnerPopupVisible(newVisible, context);
       if (!newVisible) {
         extra?.afterHidePopup?.(context);
+        skipNextBlur.current = true;
       }
     }
   };
@@ -97,6 +99,7 @@ export default function useOverlayInnerStyle(
   return {
     tOverlayInnerStyle,
     innerPopupVisible,
+    skipNextBlur,
     onInnerPopupVisibleChange,
   };
 }
diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
