From cc566e4d92e312ffb7466f489369be58441f10b4 Mon Sep 17 00:00:00 2001
From: Ming <ming.ying.nyc@gmail.com>
Date: Fri, 19 May 2023 16:30:53 -0400
Subject: [PATCH] feat: Introduce onInputValueChange prop to SelectBox and
 MultiSelectBox components

---
 .../input-elements/MultiSelectBox/MultiSelectBox.tsx     | 9 ++++++++-
 src/components/input-elements/SelectBox/SelectBox.tsx    | 5 +++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx b/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx
index da7b27b81..8dfeff4b3 100644
--- a/src/components/input-elements/MultiSelectBox/MultiSelectBox.tsx
+++ b/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
diff --git a/src/components/input-elements/SelectBox/SelectBox.tsx b/src/components/input-elements/SelectBox/SelectBox.tsx
index 0c1a316f3..f272c9a2a 100644
--- a/src/components/input-elements/SelectBox/SelectBox.tsx
+++ b/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(