refactor: bind onMouseDown to the outer div

RylanBot · RylanBot · commit dc11c706175b · 2025-12-02T22:20:57.000+08:00
diff --git a/packages/components/input/Input.tsx b/packages/components/input/Input.tsx
@@ -122,7 +122,6 @@ const Input = forwardRefWithStatics(
     // inputPreRef 用于预存输入框宽度，应用在 auto width 模式中
     const inputPreRef: React.RefObject<HTMLInputElement> = useRef(null);
     const wrapperRef: React.RefObject<HTMLDivElement> = useRef(null);
-    const isClickingIconRef = useRef(false);
 
     const [isHover, toggleIsHover] = useState(false);
     const [isFocused, toggleIsFocused] = useState(false);
@@ -139,14 +138,15 @@ const Input = forwardRefWithStatics(
     const prefixIconContent = renderIcon(classPrefix, 'prefix', parseTNode(prefixIcon));
     let suffixIconNew = suffixIcon;
 
-    if (isShowClearIcon)
+    if (isShowClearIcon) {
       suffixIconNew = (
         <CloseCircleFilledIcon
           className={`${classPrefix}-input__suffix-clear`}
-          onMouseDown={handleMouseDown}
+          onMouseDown={handleIconMouseDown}
           onClick={handleClear}
         />
       );
+    }
     if (type === 'password' && typeof suffixIcon === 'undefined') {
       const PASSWORD_ICON_MAP = {
         password: BrowseOffIcon,
@@ -155,11 +155,7 @@ const Input = forwardRefWithStatics(
       const PasswordIcon = PASSWORD_ICON_MAP[renderType];
       if (PasswordIcon) {
         suffixIconNew = (
-          <PasswordIcon
-            className={`${classPrefix}-input__suffix-clear`}
-            onMouseDown={handleMouseDown}
-            onClick={togglePasswordVisible}
-          />
+          <PasswordIcon className={`${classPrefix}-input__suffix-clear`} onClick={togglePasswordVisible} />
         );
       }
     }
@@ -273,6 +269,7 @@ const Input = forwardRefWithStatics(
         })}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        onMouseDown={handleMouseDown}
         onWheel={(e) => onWheel?.({ e })}
         onClick={(e) => {
           inputRef.current?.focus();
@@ -308,7 +305,6 @@ const Input = forwardRefWithStatics(
 
       requestAnimationFrame(() => {
         inputEl?.setSelectionRange(cursorPosition, cursorPosition);
-        isClickingIconRef.current = false;
       });
     }
 
@@ -328,20 +324,20 @@ const Input = forwardRefWithStatics(
         onChange(newStr, { e, trigger });
       }
     }
-    // 添加MouseDown阻止冒泡，防止點擊Clear value會導致彈窗閃爍一下
-    // https://github.com/Tencent/tdesign-react/issues/2320
-    function handleMouseDown(e: React.MouseEvent<SVGSVGElement, globalThis.MouseEvent>) {
+    function handleIconMouseDown(e: React.MouseEvent<SVGSVGElement>) {
+      e.preventDefault();
+      // 阻止冒泡，防止点击 icon 会导致弹窗闪烁一下
+      // https://github.com/Tencent/tdesign-react/issues/2320
       e.stopPropagation();
-      // 兼容React16
+      // 兼容 React 16
       e.nativeEvent.stopImmediatePropagation();
-      isClickingIconRef.current = true;
+    }
+    function handleMouseDown(e: React.MouseEvent<HTMLDivElement>) {
+      e.preventDefault(); // 防止焦点转移
     }
     function handleClear(e: React.MouseEvent<SVGSVGElement>) {
       onChange?.('', { e, trigger: 'clear' });
       onClear?.({ e });
-      requestAnimationFrame(() => {
-        isClickingIconRef.current = false;
-      });
     }
     function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
       const {
@@ -382,7 +378,6 @@ const Input = forwardRefWithStatics(
     }
 
     function handleFocus(e: React.FocusEvent<HTMLInputElement>) {
-      if (isClickingIconRef.current) return;
       const {
         currentTarget: { value },
       } = e;
@@ -392,7 +387,6 @@ const Input = forwardRefWithStatics(
     }
 
     function handleBlur(e: React.FocusEvent<HTMLInputElement>) {
-      if (isClickingIconRef.current) return;
       const {
         currentTarget: { value },
       } = e;
diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, vi, act, mockTimeout } from '@test/utils';
+import { render, fireEvent, vi, act } from '@test/utils';
 import userEvent from '@testing-library/user-event';
 import Input from '../Input';
 
@@ -47,7 +47,6 @@ describe('Input 组件测试', () => {
     fireEvent.mouseUp(clearIcon);
     fireEvent.click(clearIcon);
     expect(blurFn).toBeCalledTimes(0);
-    await mockTimeout(() => true);
     fireEvent.blur(InputDom);
     expect(blurFn).toBeCalledTimes(1);
   });
diff --git a/packages/components/select-input/useMultiple.tsx b/packages/components/select-input/useMultiple.tsx
@@ -37,7 +37,6 @@ export default function useMultiple(props: SelectInputProps) {
   const [tInputValue, setTInputValue] = useControlled(props, 'inputValue', props.onInputChange);
 
   const tagInputRef = useRef<InputRef>(null);
-  const blurTimeoutRef = useRef(null);
 
   const iKeys: SelectInputKeys = { ...DEFAULT_KEYS, ...props.keys };
 
@@ -61,30 +60,17 @@ export default function useMultiple(props: SelectInputProps) {
 
   const renderSelectMultiple = (p: RenderSelectMultipleParams) => {
     const handleBlur = (value: SelectInputValue, context: { e: React.FocusEvent<HTMLInputElement> }) => {
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
+      if (!p.popupVisible) {
+        p.onInnerBlur(context);
+      } else if (!props.panel) {
+        props.onBlur?.(value, { e: context.e, inputValue: tInputValue, tagInputValue: tags });
       }
-      // 强制把 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 });
     };
 
diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
@@ -48,7 +48,6 @@ export default function useSingle(props: TdSelectInputProps) {
   const { classPrefix } = useConfig();
 
   const inputRef = useRef<InputRef>(null);
-  const blurTimeoutRef = useRef(null);
 
   const [inputValue, setInputValue] = useControlled(props, 'inputValue', props.onInputChange);
 
@@ -78,27 +77,14 @@ export default function useSingle(props: TdSelectInputProps) {
     const displayedValue = popupVisible && props.allowInput ? inputValue : getInputValue(value, keys);
 
     const handleBlur = (value, ctx) => {
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
+      if (!popupVisible) {
+        onInnerBlur(ctx);
+      } else if (!props.panel) {
+        props.onBlur?.(value, { e: ctx.e, inputValue: value });
       }
-      // 强制把 popupVisible 设置为 false 时，点击 input，会出现 blur -> focus 的情况，因此忽略前面短暂的 blur 事件
-      blurTimeoutRef.current = setTimeout(() => {
-        if (blurTimeoutRef.current) {
-          if (!popupVisible) {
-            onInnerBlur(ctx);
-          } else if (!props.panel) {
-            props.onBlur?.(value, { e: ctx.e, inputValue: value });
-          }
-        }
-        blurTimeoutRef.current = null;
-      }, 150);
     };
 
     const handleFocus = (val, context) => {
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
-        blurTimeoutRef.current = null;
-      }
       props.onFocus?.(value, { ...context, inputValue: val });
       // focus might not need to change input value. it will caught some curious errors in tree-select
       // !popupVisible && setInputValue(getInputValue(value, keys), { ...context, trigger: 'input' });
