refactor: bind onMouseDown to the outer div

Author: RylanBot

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);
@@ -143,7 +142,6 @@ const Input = forwardRefWithStatics(
       suffixIconNew = (
         <CloseCircleFilledIcon
           className={`${classPrefix}-input__suffix-clear`}
-          onMouseDown={handleMouseDown}
           onClick={handleClear}
         />
       );
@@ -157,7 +155,6 @@ const Input = forwardRefWithStatics(
         suffixIconNew = (
           <PasswordIcon
             className={`${classPrefix}-input__suffix-clear`}
-            onMouseDown={handleMouseDown}
             onClick={togglePasswordVisible}
           />
         );
@@ -273,6 +270,7 @@ const Input = forwardRefWithStatics(
         })}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        onMouseDown={handleMouseDown}
         onWheel={(e) => onWheel?.({ e })}
         onClick={(e) => {
           inputRef.current?.focus();
@@ -308,7 +306,6 @@ const Input = forwardRefWithStatics(
 
       requestAnimationFrame(() => {
         inputEl?.setSelectionRange(cursorPosition, cursorPosition);
-        isClickingIconRef.current = false;
       });
     }
 
@@ -330,18 +327,15 @@ const Input = forwardRefWithStatics(
     }
     // 添加MouseDown阻止冒泡，防止點擊Clear value會導致彈窗閃爍一下
     // https://github.com/Tencent/tdesign-react/issues/2320
-    function handleMouseDown(e: React.MouseEvent<SVGSVGElement, globalThis.MouseEvent>) {
+    function handleMouseDown(e: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>) {
+      e.preventDefault(); // 阻止默认行为，防止焦点转移
       e.stopPropagation();
       // 兼容React16
       e.nativeEvent.stopImmediatePropagation();
-      isClickingIconRef.current = true;
     }
     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 +376,6 @@ const Input = forwardRefWithStatics(
     }
 
     function handleFocus(e: React.FocusEvent<HTMLInputElement>) {
-      if (isClickingIconRef.current) return;
       const {
         currentTarget: { value },
       } = e;
@@ -392,7 +385,6 @@ const Input = forwardRefWithStatics(
     }
 
     function handleBlur(e: React.FocusEvent<HTMLInputElement>) {
-      if (isClickingIconRef.current) return;
       const {
         currentTarget: { value },
       } = e;

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);
   });

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 });
     };
 

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' });