feat(FE-40): add onInputChange prop

src/components/input/SelectInput.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import { ComponentType, ReactNode, useMemo } from 'react';
-import Select, { OptionProps, GroupBase } from 'react-select';
+import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
+import Select, { OptionProps, GroupBase, InputActionMeta } from 'react-select';
 import makeAnimated from 'react-select/animated';
+import { useDebounce } from 'use-debounce';
 
 import { cn } from '@/lib/helper';
 
@@ -41,6 +42,8 @@ interface SelectInputProps<T = OptionType> {
   errorMessage?: string;
   isAnimated?: boolean;
   openMenu?: boolean;
+  delay?: number;
+  onInputChange?: (search: string) => void;
 }
 
 const animatedComponents = makeAnimated();
@@ -65,7 +68,13 @@ const SelectInput = <T extends OptionType>({
   errorMessage,
   isAnimated = true,
   openMenu,
+  delay = 300,
+  onInputChange,
 }: SelectInputProps) => {
+  const [internalInputValue, setInternalInputValue] = useState('');
+
+  const [debouncedInputValue] = useDebounce(internalInputValue, delay ?? 300);
+
   const components = useMemo(() => {
     const base = isAnimated ? animatedComponents : {};
 
@@ -75,6 +84,14 @@ const SelectInput = <T extends OptionType>({
     };
   }, [isAnimated]);
 
+  const internalInputChangeHandler = (value: string, meta: InputActionMeta) => {
+    if (meta.action === 'input-change') setInternalInputValue(value);
+    if (meta.action === 'menu-close') setInternalInputValue('');
+  };
+
+  useEffect(() => {
+    onInputChange?.(debouncedInputValue);
+  }, [debouncedInputValue]);
   return (
     <div
       className={cn(
@@ -110,6 +127,8 @@ const SelectInput = <T extends OptionType>({
         onChange={(val) => onChange?.(val as T)}
         options={options}
         menuIsOpen={openMenu}
+        inputValue={internalInputValue}
+        onInputChange={internalInputChangeHandler}
         isMulti={isMulti}
         isDisabled={isDisabled}
         isLoading={isLoading}