chore: multiple

Author: zombieJ

docs/examples/multiple-with-maxCount.tsx

@@ -14,6 +14,7 @@ const Test: React.FC = () => {
     <>
       <h2>Multiple with maxCount</h2>
       <Select
+        showSearch
         maxCount={4}
         mode="multiple"
         value={value}

src/BaseSelect/index.tsx

@@ -31,6 +31,7 @@ import TransBtn from '../TransBtn';
 import { getSeparatedContent, isValidCount } from '../utils/valueUtil';
 import Polite from './Polite';
 import useOpen from '../hooks/useOpen';
+import { useEvent } from '@rc-component/util';
 export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input';
 
 /**
@@ -596,14 +597,14 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   // };
 
   // ============================ Selector ============================
-  const onSelectorRemove = (val: DisplayValueType) => {
+  const onSelectorRemove = useEvent((val: DisplayValueType) => {
     const newValues = displayValues.filter((i) => i !== val);
 
     onDisplayValuesChange(newValues, {
       type: 'remove',
       values: [val],
     });
-  };
+  });
 
   const onInputBlur = () => {
     // Unlock the Enter key after the input blur; otherwise, the Enter key needs to be pressed twice to trigger the correct effect.
@@ -937,6 +938,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       onBlur={onInternalBlur}
       onClearMouseDown={onClearMouseDown}
       onKeyDown={onInternalKeyDown}
+      onSelectorRemove={onSelectorRemove}
       // Open
       onMouseDown={onInternalMouseDown}
     />

src/SelectInput/Content/MultipleContent.tsx

@@ -25,7 +25,7 @@ export default React.forwardRef<HTMLInputElement, SharedContentProps>(function M
   { inputProps },
   ref,
 ) {
-  const { prefixCls, displayValues, searchValue } = useSelectInputContext();
+  const { prefixCls, displayValues, searchValue, onSelectorRemove } = useSelectInputContext();
   const baseProps = useBaseProps();
   const { disabled, showSearch, open, toggleOpen } = baseProps;
 
@@ -56,8 +56,7 @@ export default React.forwardRef<HTMLInputElement, SharedContentProps>(function M
   };
 
   const onRemove = (value: DisplayValueType) => {
-    // TODO: This should be connected to parent's remove logic
-    console.log('Remove:', value);
+    onSelectorRemove?.(value);
   };
 
   // ======================== Item ========================
@@ -135,7 +134,7 @@ export default React.forwardRef<HTMLInputElement, SharedContentProps>(function M
         disabled={disabled}
         readOnly={!inputEditable}
         {...inputProps}
-        value={String(inputValue || '')}
+        value={inputValue || ''}
       />
 
       {/* Measure Node */}

src/SelectInput/index.tsx

@@ -26,6 +26,7 @@ export interface SelectInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   onInputBlur?: () => void;
   onClearMouseDown?: React.MouseEventHandler<HTMLElement>;
   onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onSelectorRemove?: (value: DisplayValueType) => void;
   maxLength?: number;
   autoFocus?: boolean;
   // Add other props that need to be passed through
@@ -51,6 +52,7 @@ const DEFAULT_OMIT_PROPS = [
   'onPopupScroll',
   'tabIndex',
   'activeValue',
+  'onSelectorRemove',
 ] as const;
 
 export default React.forwardRef<SelectInputRef, SelectInputProps>(function SelectInput(
@@ -89,6 +91,7 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
     onBlur,
     onClearMouseDown,
     onInputKeyDown,
+    onSelectorRemove,
 
     ...restProps
   } = props;