chore: clear logic

Author: zombieJ

assets/patch.less

@@ -5,6 +5,8 @@
   display: inline-flex;
   align-items: center;
   user-select: none;
+  border: 1px solid blue;
+  position: relative;
 
   // Content 部分自动占据剩余宽度
   .@{select-prefix}-content {
@@ -37,6 +39,7 @@
     }
   }
 
+  .@{select-prefix}-content,
   .@{select-prefix}-input,
   .@{select-prefix}-placeholder {
     padding: 0;
@@ -52,4 +55,10 @@
   .@{select-prefix}-clear {
     flex: none;
   }
+
+  .@{select-prefix}-clear {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
 }

src/BaseSelect/index.tsx

@@ -190,7 +190,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
   tokenSeparators?: string[];
 
   // >>> Icons
-  allowClear?: boolean | { clearIcon?: RenderNode };
+  allowClear?: boolean | { clearIcon?: React.ReactNode };
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   /**

src/SelectInput/Affix.tsx

@@ -1,18 +1,22 @@
 import * as React from 'react';
 import { useSelectInputContext } from './context';
 
-export interface AffixProps {
+export interface AffixProps extends React.HTMLAttributes<HTMLDivElement> {
   type: 'prefix' | 'suffix' | 'clear';
   children?: React.ReactNode;
 }
 
 export default function Affix(props: AffixProps) {
-  const { type, children } = props;
+  const { type, children, ...restProps } = props;
   const { prefixCls } = useSelectInputContext();
 
   if (!children) {
     return null;
   }
 
-  return <div className={`${prefixCls}-${type}`}>{children}</div>;
+  return (
+    <div className={`${prefixCls}-${type}`} {...restProps}>
+      {children}
+    </div>
+  );
 }

src/SelectInput/index.tsx

@@ -5,6 +5,7 @@ import SelectContent from './Content';
 import SelectInputContext, { type ContentContextProps } from './context';
 import type { DisplayValueType, Mode } from '../interface';
 import useBaseProps from '../hooks/useBaseProps';
+import { useEvent } from '@rc-component/util';
 
 export interface SelectInputRef {
   focus: (options?: FocusOptions) => void;
@@ -87,13 +88,19 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
   );
 
   // ====================== Open ======================
-  const onInternalMouseDown: SelectInputProps['onMouseDown'] = (event) => {
+  const onInternalMouseDown: SelectInputProps['onMouseDown'] = useEvent((event) => {
     event.preventDefault();
-    inputRef.current?.focus();
 
-    toggleOpen();
+    if (!(event.nativeEvent as any)._select_lazy) {
+      inputRef.current?.focus();
+      toggleOpen();
+    } else if (triggerOpen) {
+      // Lazy should also close when click clear icon
+      toggleOpen(false);
+    }
+
     onMouseDown?.(event);
-  };
+  });
 
   const onInternalBlur: SelectInputProps['onBlur'] = (event) => {
     toggleOpen(false);
@@ -148,7 +155,17 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
         {/* Suffix */}
         <Affix type="suffix">{suffix}</Affix>
         {/* Clear Icon */}
-        {clearIcon && <Affix type="clear">{clearIcon}</Affix>}
+        {clearIcon && (
+          <Affix
+            type="clear"
+            onMouseDown={(e) => {
+              // Mark to tell not trigger open or focus
+              (e.nativeEvent as any)._select_lazy = true;
+            }}
+          >
+            {clearIcon}
+          </Affix>
+        )}
       </div>
     </SelectInputContext.Provider>
   );

src/TransBtn.tsx

@@ -12,6 +12,16 @@ export interface TransBtnProps {
   children?: React.ReactNode;
 }
 
+/**
+ * Small wrapper for Select icons (clear/arrow/etc.).
+ * Prevents default mousedown to avoid blurring or caret moves, and
+ * renders a custom icon or a fallback icon span.
+ *
+ * DOM structure:
+ * <span className={className} ...>
+ *   { icon || <span className={`${className}-icon`}>{children}</span> }
+ * </span>
+ */
 const TransBtn: React.FC<TransBtnProps> = (props) => {
   const { className, style, customizeIcon, customizeIconProps, children, onMouseDown, onClick } =
     props;

src/hooks/useAllowClear.tsx

@@ -1,6 +1,11 @@
 import TransBtn from '../TransBtn';
 import type { DisplayValueType, Mode, RenderNode } from '../interface';
-import React from 'react';
+import React, { useMemo } from 'react';
+
+export interface AllowClearConfig {
+  allowClear: boolean;
+  clearIcon: React.ReactNode;
+}
 
 export const useAllowClear = (
   prefixCls: string,
@@ -11,38 +16,45 @@ export const useAllowClear = (
   disabled: boolean = false,
   mergedSearchValue?: string,
   mode?: Mode,
-) => {
-  const mergedClearIcon = React.useMemo(() => {
-    if (typeof allowClear === 'object') {
-      return allowClear.clearIcon;
+): AllowClearConfig => {
+  // Convert boolean to object first
+  const allowClearConfig = useMemo<Partial<AllowClearConfig>>(() => {
+    if (typeof allowClear === 'boolean') {
+      return { allowClear };
     }
-    if (clearIcon) {
-      return clearIcon;
+    if (allowClear && typeof allowClear === 'object') {
+      return allowClear;
     }
-  }, [allowClear, clearIcon]);
+    return { allowClear: false };
+  }, [allowClear]);
 
-  const mergedAllowClear = React.useMemo<boolean>(() => {
-    if (
+  return useMemo(() => {
+    const mergedAllowClear =
       !disabled &&
-      !!allowClear &&
+      allowClearConfig.allowClear !== false &&
       (displayValues.length || mergedSearchValue) &&
-      !(mode === 'combobox' && mergedSearchValue === '')
-    ) {
-      return true;
-    }
-    return false;
-  }, [allowClear, disabled, displayValues.length, mergedSearchValue, mode]);
+      !(mode === 'combobox' && mergedSearchValue === '');
 
-  return {
-    allowClear: mergedAllowClear,
-    clearIcon: (
-      <TransBtn
-        className={`${prefixCls}-clear`}
-        onMouseDown={onClearMouseDown}
-        customizeIcon={mergedClearIcon}
-      >
-        ×
-      </TransBtn>
-    ),
-  };
+    return {
+      allowClear: mergedAllowClear,
+      clearIcon: mergedAllowClear ? (
+        <TransBtn
+          className={`${prefixCls}-clear`}
+          onMouseDown={onClearMouseDown}
+          customizeIcon={allowClearConfig.clearIcon || clearIcon}
+        >
+          ×
+        </TransBtn>
+      ) : null,
+    };
+  }, [
+    allowClearConfig,
+    clearIcon,
+    disabled,
+    displayValues.length,
+    mergedSearchValue,
+    mode,
+    onClearMouseDown,
+    prefixCls,
+  ]);
 };