fix: debouncing not working on empty string

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/CatalogFilterSection/index.tsx

@@ -1,3 +1,4 @@
-import CatalogFilterSidebar from './CatalogFilterSidebar';
+import CatalogFilterSidebar, { FilterList } from './CatalogFilterSidebar';
 
 export { CatalogFilterSidebar };
+export type { FilterList };

src/custom/StyledSearchBar/StyledSearchBar.tsx

@@ -1,6 +1,6 @@
 import { SxProps, Theme } from '@mui/material';
 import { debounce } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { InputAdornment } from '../../base';
 import { SearchIcon } from '../../icons';
 import { useTheme } from '../../theme';
@@ -33,44 +33,55 @@ interface SearchBarProps {
  */
 function StyledSearchBar({
   onChange,
-  value,
+  value = '',
   label,
   sx,
   placeholder,
   endAdornment,
   debounceTime = 300
 }: SearchBarProps): JSX.Element {
   const theme = useTheme();
-  const [inputValue, setInputValue] = useState(value ?? '');
+  const [inputValue, setInputValue] = useState(value);
 
+  // Update local state when controlled value changes
   useEffect(() => {
-    if (value !== undefined && value !== inputValue) {
+    if (value !== inputValue) {
       setInputValue(value);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
-  useEffect(() => {
-    const handler = debounce((newValue: string) => {
-      if (onChange) {
-        const syntheticEvent = {
-          target: { value: newValue },
-          persist: () => {}
-        } as React.ChangeEvent<HTMLInputElement>;
+  // Create synthetic event helper
+  const createSyntheticEvent = (value: string): React.ChangeEvent<HTMLInputElement> =>
+    ({
+      target: { value },
+      persist: () => {}
+    }) as React.ChangeEvent<HTMLInputElement>;
 
-        onChange(syntheticEvent);
-      }
-    }, debounceTime);
+  // Memoize the debounced handler
+  const debouncedOnChange = useMemo(
+    () =>
+      debounce((newValue: string) => {
+        onChange?.(createSyntheticEvent(newValue));
+      }, debounceTime),
+    [onChange, debounceTime]
+  );
 
-    handler(inputValue);
+  useEffect(() => {
+    if (!onChange) return;
+    if (inputValue === '') {
+      onChange(createSyntheticEvent(inputValue));
+    } else {
+      debouncedOnChange(inputValue);
+    }
 
     return () => {
-      handler.cancel();
+      debouncedOnChange.cancel();
     };
-  }, [inputValue, onChange, debounceTime]);
+  }, [inputValue, onChange, debouncedOnChange]);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(event.target.value);
+    const newValue = event.target.value;
+    setInputValue(newValue);
   };
 
   return (

src/custom/index.tsx

@@ -45,6 +45,7 @@ import { TransferListProps } from './TransferModal/TransferList/TransferList';
 import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
 export { CatalogCard } from './CatalogCard';
 export { CatalogFilterSidebar } from './CatalogFilterSection';
+export type { FilterList } from './CatalogFilterSection';
 export { StyledChartDialog } from './ChartDialog';
 export { LearningContent } from './LearningContent';
 export { NavigationNavbar } from './NavigationNavbar';