Introduce onInputValueChange prop to SelectBox and MultiSelectBox components

Author: rebasedming

src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx

@@ -33,6 +33,7 @@ export interface MultiSelectBoxProps extends React.HTMLAttributes<HTMLDivElement
   defaultValue?: string[];
   value?: string[];
   onValueChange?: (value: string[]) => void;
+  onInputValueChange?: (value: string) => void;
   placeholder?: string;
   disabled?: boolean;
   icon?: React.ElementType | React.JSXElementConstructor<any>;
@@ -44,6 +45,7 @@ const MultiSelectBox = React.forwardRef<HTMLDivElement, MultiSelectBoxProps>((pr
     defaultValue,
     value,
     onValueChange,
+    onInputValueChange,
     placeholder = "Select...",
     disabled = false,
     icon,
@@ -87,6 +89,11 @@ const MultiSelectBox = React.forwardRef<HTMLDivElement, MultiSelectBoxProps>((pr
     onValueChange?.(newSelectedItems);
   };
 
+  const handleInputValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+    onInputValueChange?.(e.target.value);
+  };
+
   const handleReset = () => {
     setSelectedValue([]);
     onValueChange?.([]);
@@ -224,7 +231,7 @@ const MultiSelectBox = React.forwardRef<HTMLDivElement, MultiSelectBoxProps>((pr
               fontSize.sm,
               fontWeight.md,
             )}
-            onChange={(e) => setSearchQuery(e.target.value)}
+            onChange={handleInputValueChange}
           />
         </div>
         <SelectedValueContext.Provider

src/components/input-elements/SelectBox/SelectBox.tsx

@@ -37,6 +37,7 @@ export interface SelectBoxProps extends React.HTMLAttributes<HTMLDivElement> {
   defaultValue?: string;
   value?: string;
   onValueChange?: (value: string) => void;
+  onInputValueChange?: (value: string) => void;
   placeholder?: string;
   disabled?: boolean;
   icon?: React.ElementType | React.JSXElementConstructor<any>;
@@ -48,6 +49,7 @@ const SelectBox = React.forwardRef<HTMLDivElement, SelectBoxProps>((props, ref)
     defaultValue,
     value,
     onValueChange,
+    onInputValueChange,
     placeholder = "Select...",
     disabled = false,
     icon,
@@ -56,6 +58,7 @@ const SelectBox = React.forwardRef<HTMLDivElement, SelectBoxProps>((props, ref)
     onKeyDown,
     ...other
   } = props;
+
   const valueToNameMapping = useMemo(() => constructValueToNameMapping(children), [children]);
 
   const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);
@@ -107,6 +110,8 @@ const SelectBox = React.forwardRef<HTMLDivElement, SelectBoxProps>((props, ref)
   const handleInputValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
     setInputValue(e.target.value);
+
+    onInputValueChange?.(e.target.value);
   };
 
   const [hoveredValue, handleKeyDown] = useSelectOnKeyDown(