ebta-workflow-prod 4.0.17 → 4.0.19

package/src/elements/ItemSearcher_v2.tsx

@@ -13,14 +13,15 @@ import ExpandMore from '@mui/icons-material/ExpandMore';
 import SearchIcon from '@vertigis/web/ui/icons/Search';
 import InputBase from '@mui/material/InputBase';
 import Box from "@vertigis/web/ui/Box"
-import Typography from  '@vertigis/web/ui/Typography';
+import Typography from '@vertigis/web/ui/Typography';
 import { createTheme } from "@mui/material/styles";
 import { ThemeProvider } from "@emotion/react";
 import Checkbox from '@vertigis/web/ui/Checkbox';
-import  IconButton  from '@vertigis/web/ui/IconButton';
+import IconButton from '@vertigis/web/ui/IconButton';
 import { Category, Clear as ClearIcon } from '@mui/icons-material';
 import Chip from '@mui/material/Chip';
 import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+import { useRef } from "react";
 
 
 /**
@@ -33,15 +34,15 @@ import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
  * runtime, and passed in as `props`. You can update the properties by using
  * `props.setProperty(key, value)`.
  */
-interface ItemSearcher_V2Props extends FormElementProps<string> { 
+interface ItemSearcher_V2Props extends FormElementProps<string> {
 
     itemData: Category[]; // Structured data passed as prop
     setting?: settingConfig;
     request?: { type: string, timestamp: number, data?: any };
     openCategories: Set<string>;//Status storage property only
-    searchQuery:string;//Status storage property only
-    selection:{ [key: string]: { [key: string]: Item[] } }//Status storage property only
-    loadDataTime:number;//provide cabability of loading a totally different data
+    searchQuery: string;//Status storage property only
+    selection: { [key: string]: { [key: string]: Item[] } }//Status storage property only
+    loadDataTime: number;//provide cabability of loading a totally different data
 }
 
 
@@ -111,7 +112,7 @@ interface Category {
     checkbox?: boolean;   //If true, show checkbox that makes all child items selected/unselected 
     index?: number; //as a child Category, indicate the position of this child category compared to other sibling items/categories
     parentCate?: string;
-    description?:string;
+    description?: string;
 }
 
 interface settingConfig {
@@ -128,9 +129,9 @@ interface settingConfig {
     reset?: number; //If loading another totally different content, give timestamp number for reset parameter to reload itemData
     showCount?: boolean;  // display item count after category name
     flatResut?: boolean;//decide the output to be result/layer or result/group/layer
-    matchAnyKeyword?:boolean;//When search keywords (detected seperation by many spliters), fulfil all keywords or any of keyword.
-    maxSelectableItems?:number;//maximum number of items that can be selected at the same time. If 0, no limit.
-    forceSort?:boolean;//if true, sort the items in the same order as the original data. If false, sort by name.
+    matchAnyKeyword?: boolean;//When search keywords (detected seperation by many spliters), fulfil all keywords or any of keyword.
+    maxSelectableItems?: number;//maximum number of items that can be selected at the same time. If 0, no limit.
+    forceSort?: boolean;//if true, sort the items in the same order as the original data. If false, sort by name.
 }
 
 
@@ -171,20 +172,32 @@ const defaultTheme = createTheme({
 
 // Function to get all items from category and its subcategories
 function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
-    const { raiseEvent ,openCategories,searchQuery,selection,loadDataTime, setValue, setProperty} = props;
-    if (openCategories ==undefined){setProperty("openCategories" as any,new Set())}
-    if (searchQuery ==undefined){setProperty("searchQuery" as any,'')}
-    if (selection ==undefined){setProperty("selection" as any,{})}
-    if (loadDataTime ==undefined){setProperty("loadDataTime" as any,0)}
+    const { raiseEvent, openCategories, searchQuery, selection, loadDataTime, setValue, setProperty } = props;
+    if (openCategories == undefined) { setProperty("openCategories" as any, new Set()) }
+    if (searchQuery == undefined) { setProperty("searchQuery" as any, '') }
+    if (selection == undefined) { setProperty("selection" as any, {}) }
+    if (loadDataTime == undefined) { setProperty("loadDataTime" as any, 0) }
     const [data, setData] = React.useState<Category[]>(props.itemData);
     const preSearchOpenCategories = React.useRef<Set<string>>(new Set());
-    const currentOpenCategories = React.useRef<Set<string> >(new Set());
-    const prevSearchValue = React.useRef<string>('')
+    const hadSearchText = React.useRef<boolean>(false)
     const [filteredData, setFilteredData] = React.useState<Category[]>([]); // New state for filtered data
-    const requestTime = React.useRef<number | null>(null);
+    const requestTime = React.useRef<number | null>(null)
+    const [inputValue, setInputValue] = React.useState<string>(searchQuery);
+    const debounceTimer = React.useRef<ReturnType<typeof setTimeout>>();
+    const latestOpenCategories = React.useRef<Set<string>>(openCategories);
+
+
+
+
     // Handle search input changes
+
     const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setProperty("searchQuery" as any,event.target.value); // Update search query
+        const value = event.target.value;
+        setInputValue(value); // updates the input instantly - no lag
+        clearTimeout(debounceTimer.current);
+        debounceTimer.current = setTimeout(() => {
+            setProperty("searchQuery" as any, value); // triggers the expensive effect
+        }, 400);
     };
 
 
@@ -207,7 +220,7 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
                 height: 18,
                 width: 18,
                 marginLeft: '8px',
-    
+
             }}
             alt="The category icon"
             src={expandIcon} // Use the item's img property
@@ -225,7 +238,7 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
         else if (!expandIcon && openCats.has(catName)) return (<ExpandLess />)
         else if (!expandIcon && !openCats.has(catName)) return (<ExpandMore />)
     }
-    
+
 
     function findCategory(item: Item) {
         return props.itemData.find(category =>
@@ -235,7 +248,7 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
 
     function tickItem(item: Item, category: Category) {
         let selectCopy = structuredClone(selection)
-        
+
         if (isSelected(item, category.name)) {
             //uncheck item
             for (let key in selectCopy) {
@@ -266,7 +279,7 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
                 raiseEvent("error" as any, JSON.stringify({ type: "maxItemsReached", message: `You can only select up to ${props.setting.maxSelectableItems} items` }));
                 return;
             }
-            
+
             // Add the item to the specified category
             if (category) {
                 if (category.parentCate) {
@@ -316,7 +329,7 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
     const handleCategoryCheck = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, category: Category) => {
         event.stopPropagation();
         let selectCopy = structuredClone(selection);
-        
+
         // For "allSelected" case, just remove all items (no limit check needed)
         if (isChildSelected(category) === "allSelected") {
             if (!category.parentCate) {
@@ -324,12 +337,12 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
             } else {
                 delete selectCopy[category.parentCate][category.name];
             }
-        } 
+        }
         // For adding items, check limit
         else {
             const currentTotal = getTotalSelectedItems();
             let itemsToAdd = 0;
-            
+
             // Calculate how many items would be added
             if (!category.parentCate) {
                 if (category.items) {
@@ -348,13 +361,13 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
                     }
                 }
             }
-            
+
             // Check if adding these items would exceed the limit
             if (props.setting?.maxSelectableItems && (currentTotal + itemsToAdd > props.setting.maxSelectableItems)) {
                 raiseEvent("error" as any, JSON.stringify({ type: "maxItemsReached", message: `You can only select up to ${props.setting.maxSelectableItems} items` }));
                 return;
             }
-            
+
             // Proceed with adding items if within limit
             if (!category.parentCate) {
                 //only one level
@@ -388,7 +401,7 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
                 }
             }
         }
-        
+
         // Update selection state
         setProperty("selection" as any, selectCopy);
     };
@@ -403,7 +416,7 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
         } else {
             updatedOpenCategories.add(categoryName); // Open category
         }
-        
+
         setProperty("openCategories" as any, updatedOpenCategories); // Update with new value
     };
 
@@ -445,15 +458,15 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
                     return true;
                 }
             }
-            
-                for (let key in selection) {
-                    if (selection[key][cateName]) {
-                        let index = selection[key][cateName].findIndex(a => a.name === item.name && a.value === item.value);
-                        if (index !== -1) {
-                            return true;
-                        }
+
+            for (let key in selection) {
+                if (selection[key][cateName]) {
+                    let index = selection[key][cateName].findIndex(a => a.name === item.name && a.value === item.value);
+                    if (index !== -1) {
+                        return true;
                     }
                 }
+            }
         }
         return false;
     }
@@ -556,32 +569,32 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
 
     function cleanSelection(selection: { [key1: string]: { [key2: string]: Item[] } }) {
         for (const key1 in selection) {
-          if (Object.keys(selection[key1]).length>0) {
-            const key2Object = selection[key1];
-      
-            // Iterate over key2 within key1
-            for (const key2 in key2Object) {
-              if (key2Object.key2) {
-                // If key2 has an empty array, delete the key2
-                if (key2Object[key2].length === 0) {
-                  delete key2Object[key2];
+            if (Object.keys(selection[key1]).length > 0) {
+                const key2Object = selection[key1];
+
+                // Iterate over key2 within key1
+                for (const key2 in key2Object) {
+                    if (key2Object.key2) {
+                        // If key2 has an empty array, delete the key2
+                        if (key2Object[key2].length === 0) {
+                            delete key2Object[key2];
+                        }
+                    }
+                }
+
+                // If key1 has no more key2s left, delete key1
+                if (Object.keys(key2Object).length === 0) {
+                    delete selection[key1];
                 }
-              }
             }
-      
-            // If key1 has no more key2s left, delete key1
-            if (Object.keys(key2Object).length === 0) {
-              delete selection[key1];
+            else {
+                delete selection[key1]
             }
-          }
-          else{
-            delete selection[key1]
-          }
         }
         return selection;
-      }
-      
-          // Render categories with items and nested child categories
+    }
+
+    // Render categories with items and nested child categories
     const renderCategory = (category: Category, level: number): React.ReactNode => {
 
         function truncateString(str) {
@@ -602,11 +615,11 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
             if (category.parentCate) {
                 const updatedSelection = { ...selection };
                 updatedSelection[category.parentCate][category.name] = [];
-                 setProperty("selection" as any,updatedSelection);
+                setProperty("selection" as any, updatedSelection);
             } else {
                 const updatedSelection = { ...selection };
                 updatedSelection[category.name] = {};
-                 setProperty("selection" as any,updatedSelection);
+                setProperty("selection" as any, updatedSelection);
             }
 
         };
@@ -643,13 +656,13 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
                 <Checkbox sx={{ color: 'var(--accentIconBorder) !important' }} checked={isSelected(item, cateName)} />
             </ListItemIcon> : null}
 
-            <ListItemText primary={item.name} secondary={item.description} sx={{ pl: item.img ? 2 : 0 }} primaryTypographyProps={{ style: { fontWeight: (900 - 200 * (level + 1)).toString()} }}   secondaryTypographyProps={{ style: { fontWeight: "300" } }}/>
+            <ListItemText primary={item.name} secondary={item.description} sx={{ pl: item.img ? 2 : 0 }} primaryTypographyProps={{ style: { fontWeight: (900 - 200 * (level + 1)).toString() } }} secondaryTypographyProps={{ style: { fontWeight: "300" } }} />
         </div>)
         return (
             <React.Fragment key={category.name}>
-                <ListItemButton onClick={() => handleCategoryToggle(category.name)} sx={{ pl: level * 2, py:0  , minHeight:'35px'}}> 
+                <ListItemButton onClick={() => handleCategoryToggle(category.name)} sx={{ pl: level * 2, py: 0, minHeight: '35px' }}>
                     {props.setting?.checkbox && category.checkbox ?
-                        <ListItemIcon sx={{ minHeight:'35px' }}>
+                        <ListItemIcon sx={{ minHeight: '35px' }}>
                             <Checkbox sx={{ color: 'var(--accentIconBorder) !important' }}
                                 checked={['allSelected', 'partSelected'].includes(isChildSelected(category))}
                                 onClick={(event) => handleCategoryCheck(event, category)}
@@ -668,10 +681,10 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
                             src={category.img} // Use the item's img property
                         />
                     ) : (<ListItemIcon sx={{ minWidth: '20px' }}>
-                        <FolderCopyIcon  sx={{ color: "var(--accentIconForeground)" }} />
+                        <FolderCopyIcon sx={{ color: "var(--accentIconForeground)" }} />
                     </ListItemIcon>)
                     }
-                    <ListItemText primary={props.setting?.showCount ? category.name + ` (${countAllItems(category)})` : category.name} secondary={category.description}   sx={{ pl: 1 }} primaryTypographyProps={{ style: {fontWeight: (900 - level * 200).toString() ,fontSize:level==0?'1.2rem':undefined} }}  secondaryTypographyProps={{ style: { fontWeight: "300" } }}/>
+                    <ListItemText primary={props.setting?.showCount ? category.name + ` (${countAllItems(category)})` : category.name} secondary={category.description} sx={{ pl: 1 }} primaryTypographyProps={{ style: { fontWeight: (900 - level * 200).toString(), fontSize: level == 0 ? '1.2rem' : undefined } }} secondaryTypographyProps={{ style: { fontWeight: "300" } }} />
                     {//selection chip
                         props.setting?.checkbox && sumSelection(category).length > 0 ?
                             <LightTooltip
@@ -687,28 +700,28 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
                     <List component="div" disablePadding>
                         {getMergedChildren(category).map((child, idx) => {
                             if (child.type === 'item') {
-                                const item:Item = child.content;
+                                const item: Item = child.content;
                                 return (
                                     <ListItemButton
-                                        sx={{ pl: (level + 1) * 2, py:0 , minHeight:'35px'}}
+                                        sx={{ pl: (level + 1) * 2, py: 0, minHeight: '35px' }}
                                         key={`item-${idx}`}
                                         onClick={() => handleItemClick(item, category)}
                                     >
                                         {props.setting?.tooltip ? (
                                             typeof props.setting?.tooltip == "string" ? (
-                                                <LightTooltip title={item[props.setting?.tooltip]}  arrow>
-                                                    {itemContent(item,category.name)}
+                                                <LightTooltip title={item[props.setting?.tooltip]} arrow>
+                                                    {itemContent(item, category.name)}
                                                 </LightTooltip>
                                             ) : (
                                                 <LightTooltip
                                                     title={props.setting?.tooltip.map(key => item[key]).join(" ; ")}
                                                     arrow
                                                 >
-                                                    {itemContent(item,category.name)}
+                                                    {itemContent(item, category.name)}
                                                 </LightTooltip>
                                             )
                                         ) : (
-                                            itemContent(item,category.name)
+                                            itemContent(item, category.name)
                                         )}
                                     </ListItemButton>
                                 );
@@ -727,27 +740,27 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
     const getMergedChildren = (category: Category) => {
         const items = category.items || [];
         const childCategories = category.childCategory || [];
-    
+
         // Convert items to an array with type marker
         const itemsWithType = items.map(item => ({
             type: 'item',
             content: item
         }));
-    
+
         // Convert child categories to an array with type marker
         const categoriesWithType = childCategories.map(category => ({
             type: 'category',
             content: category
         }));
-    
+
         // Sort based on forceSort setting
         if (props.setting?.forceSort !== false) {
             // Default behavior: sort alphabetically
-            categoriesWithType.sort((a, b) => 
+            categoriesWithType.sort((a, b) =>
                 a.content.name.localeCompare(b.content.name)
             );
-            
-            itemsWithType.sort((a, b) => 
+
+            itemsWithType.sort((a, b) =>
                 a.content.name.localeCompare(b.content.name)
             );
         } else {
@@ -759,10 +772,10 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
                 }
                 return 0; // Keep original order if no index
             });
-            
+
             // For items, we keep the original order by not sorting
         }
-    
+
         // Return categories first, then items
         return [...categoriesWithType, ...itemsWithType];
     };
@@ -782,104 +795,103 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
     React.useEffect(() => {
         function filterData(data: Category[], query: string): Category[] {
             const keywords = query.split(/[\s,+;]+/).map((word) => word.trim().toLowerCase()).filter(Boolean);
-    
+
             function searchCategory(category: Category): Category | null {
-            // Different matching logic based on the matchAnyKeyword setting
-            let categoryMatches: boolean;
-            
-            if (props.setting?.matchAnyKeyword) {
-                // ANY keyword matching (original logic) - using regex
-                const keywordRegex = new RegExp(keywords.join("|"), "i");
-                categoryMatches = keywordRegex.test(category.name);
-                
-                // Filter items based on name, description, or tags
-                const matchedItems = category.items?.filter(item =>
-                    keywordRegex.test(item.name) ||
-                    (item.description && keywordRegex.test(item.description)) ||
-                    (item.tag && item.tag.some(tag => keywordRegex.test(tag)))
-                );
-                
-                // Recursively filter child categories
-                const matchedChildCategories = category.childCategory
-                    ?.map(childCat => searchCategory(childCat))
-                    .filter((childCat): childCat is Category => childCat !== null);
-                
-                if (categoryMatches) {
-                    return {
-                        ...category,
-                        items: category.items || [],
-                        childCategory: category.childCategory || []
-                    };
-                }
-                
-                // If no match in the category name, check if items or child categories match
-                if ((matchedItems && matchedItems.length > 0) || (matchedChildCategories && matchedChildCategories.length > 0)) {
-                    return {
-                        ...category,
-                        items: matchedItems || [],
-                        childCategory: matchedChildCategories || []
-                    };
-                }
-            } else {
-                // ALL keywords matching logic
-                categoryMatches = keywords.every(keyword => 
-                    category.name.toLowerCase().includes(keyword)
-                );
-                
-                // Filter items that match ALL keywords
-                const matchedItems = category.items?.filter(item =>
-                    keywords.every(keyword => 
-                        item.name.toLowerCase().includes(keyword) ||
-                        (item.description && item.description.toLowerCase().includes(keyword)) ||
-                        (item.tag && item.tag.some(tag => tag.toLowerCase().includes(keyword)))
-                    )
-                );
-                
-                // Recursively filter child categories
-                const matchedChildCategories = category.childCategory
-                    ?.map(childCat => searchCategory(childCat))
-                    .filter((childCat): childCat is Category => childCat !== null);
-                
-                if (categoryMatches) {
-                    return {
-                        ...category,
-                        items: category.items || [],
-                        childCategory: category.childCategory || []
-                    };
-                }
-                
-                // If no match in the category name, check if items or child categories match
-                if ((matchedItems && matchedItems.length > 0) || (matchedChildCategories && matchedChildCategories.length > 0)) {
-                    return {
-                        ...category,
-                        items: matchedItems || [],
-                        childCategory: matchedChildCategories || []
-                    };
+                // Different matching logic based on the matchAnyKeyword setting
+                let categoryMatches: boolean;
+
+                if (props.setting?.matchAnyKeyword) {
+                    // ANY keyword matching (original logic) - using regex
+                    const keywordRegex = new RegExp(keywords.join("|"), "i");
+                    categoryMatches = keywordRegex.test(category.name);
+
+                    // Filter items based on name, description, or tags
+                    const matchedItems = category.items?.filter(item =>
+                        keywordRegex.test(item.name) ||
+                        (item.description && keywordRegex.test(item.description)) ||
+                        (item.tag && item.tag.some(tag => keywordRegex.test(tag)))
+                    );
+
+                    // Recursively filter child categories
+                    const matchedChildCategories = category.childCategory
+                        ?.map(childCat => searchCategory(childCat))
+                        .filter((childCat): childCat is Category => childCat !== null);
+
+                    if (categoryMatches) {
+                        return {
+                            ...category,
+                            items: category.items || [],
+                            childCategory: category.childCategory || []
+                        };
+                    }
+
+                    // If no match in the category name, check if items or child categories match
+                    if ((matchedItems && matchedItems.length > 0) || (matchedChildCategories && matchedChildCategories.length > 0)) {
+                        return {
+                            ...category,
+                            items: matchedItems || [],
+                            childCategory: matchedChildCategories || []
+                        };
+                    }
+                } else {
+                    // ALL keywords matching logic
+                    categoryMatches = keywords.every(keyword =>
+                        category.name.toLowerCase().includes(keyword)
+                    );
+
+                    // Filter items that match ALL keywords
+                    const matchedItems = category.items?.filter(item =>
+                        keywords.every(keyword =>
+                            item.name.toLowerCase().includes(keyword) ||
+                            (item.description && item.description.toLowerCase().includes(keyword)) ||
+                            (item.tag && item.tag.some(tag => tag.toLowerCase().includes(keyword)))
+                        )
+                    );
+
+                    // Recursively filter child categories
+                    const matchedChildCategories = category.childCategory
+                        ?.map(childCat => searchCategory(childCat))
+                        .filter((childCat): childCat is Category => childCat !== null);
+
+                    if (categoryMatches) {
+                        return {
+                            ...category,
+                            items: category.items || [],
+                            childCategory: category.childCategory || []
+                        };
+                    }
+
+                    // If no match in the category name, check if items or child categories match
+                    if ((matchedItems && matchedItems.length > 0) || (matchedChildCategories && matchedChildCategories.length > 0)) {
+                        return {
+                            ...category,
+                            items: matchedItems || [],
+                            childCategory: matchedChildCategories || []
+                        };
+                    }
                 }
+
+                // Exclude this category if no matches found in items or child categories
+                return null;
             }
-    
-            // Exclude this category if no matches found in items or child categories
-            return null;
-        }
-    
-    
+
+
             // Apply the search to each root category and filter out null results
             const result = data.map(category => searchCategory(category)).filter((cat): cat is Category => cat !== null);
             return result
-    
+
         }
-    
+
 
         if (searchQuery) {
-            
-            // Store the current state when search begins
-            if (searchQuery.length === 1) {
-                preSearchOpenCategories.current = new Set(currentOpenCategories.current);
-            }
 
+            if (searchQuery && !hadSearchText.current) {
+                // Store the current state when search begins
+                preSearchOpenCategories.current = new Set(latestOpenCategories.current);
+                hadSearchText.current = true;
+            }
             const searchResults = filterData(data, searchQuery);
             setFilteredData(searchResults);
-
             // Expand categories with search results
             const searchOpenCategories = new Set<string>();
             const addToOpenCategories = (category: Category) => {
@@ -888,27 +900,26 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
             };
 
             searchResults.forEach(addToOpenCategories);
-             setProperty("openCategories" as any,searchOpenCategories);
+            setProperty("openCategories" as any, searchOpenCategories);
         }
         if (!searchQuery) {
+            hadSearchText.current = false;
             // Restore pre-search state if exists
-            if (prevSearchValue.current==''){
-                currentOpenCategories.current = openCategories;
-            }
-            else {
+
             if (preSearchOpenCategories.current.size > 0) {
-                setProperty("openCategories" as any,preSearchOpenCategories.current);
+                setProperty("openCategories" as any, preSearchOpenCategories.current);
                 setFilteredData([]);
                 preSearchOpenCategories.current = new Set()
             }
             return;
         }
-    }
-        prevSearchValue.current=searchQuery
-
-    }, [searchQuery, data, props.setting?.matchAnyKeyword, openCategories, setValue, setProperty]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchQuery, data, props.setting?.matchAnyKeyword, setValue, setProperty]);
 
 
+    React.useEffect(() => {
+        latestOpenCategories.current = openCategories;
+    }, [openCategories]);
 
     React.useEffect(() => {
 
@@ -926,12 +937,12 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
             requestTime.current = props.request.timestamp;
         }
         if (props.setting?.checkbox && props.request && props.request.type == "clearSelection" && (requestTime.current) !== (props.request.timestamp)) {
-            setProperty("selection" as any,{})
+            setProperty("selection" as any, {})
             requestTime.current = props.request.timestamp;
         }
-        if (props.setting?.checkbox){
-            setValue( JSON.stringify( {selectionResult:props.setting.flatResut ? removeDirectItems() : cleanSelection(selection)}))
-            setProperty("selectionResult" as any,props.setting.flatResut ? removeDirectItems() : cleanSelection(selection))
+        if (props.setting?.checkbox) {
+            setValue(JSON.stringify({ selectionResult: props.setting.flatResut ? removeDirectItems() : cleanSelection(selection) }))
+            setProperty("selectionResult" as any, props.setting.flatResut ? removeDirectItems() : cleanSelection(selection))
         }
 
     }, [props.request, props.setting, raiseEvent, selection, setProperty, setValue])
@@ -961,12 +972,12 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
                             }))
                         })
                         category.items = category.items.filter(item => item.name !== props.request?.data.title);
-                        
-                            const newState = new Set(openCategories);
-                            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-                            newState.add(props.request?.data.title || ''); // Open category if it's closed
-                            setProperty("openCategories" as any, newState);
-                       
+
+                        const newState = new Set(openCategories);
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                        newState.add(props.request?.data.title || ''); // Open category if it's closed
+                        setProperty("openCategories" as any, newState);
+
                     }
                 }
             })
@@ -978,10 +989,10 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
     React.useEffect(() => {
         if (props.setting?.reset && (loadDataTime) !== (props.setting.reset)) {
             setData(props.itemData)
-            setProperty("selection" as any,{})
-            setProperty("openCategories" as any,new Set())
-            setProperty("searchQuery" as any,'')
-            setProperty("loadDataTime" as any,props.setting.reset)
+            setProperty("selection" as any, {})
+            setProperty("openCategories" as any, new Set())
+            setProperty("searchQuery" as any, '')
+            setProperty("loadDataTime" as any, props.setting.reset)
         }
     }, [loadDataTime, props.itemData, props.setting?.reset, setProperty])
 
@@ -997,13 +1008,17 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
                 <StyledInputBase
                     placeholder={props.setting?.searchHolder || "Search…"}
                     inputProps={{ 'aria-label': 'search' }}
-                    value={searchQuery}
+                    value={inputValue}
                     onChange={handleSearchChange}
                     sx={{ padding: '1px', fontSize: '1.4rem', color: 'var(--accentIconBorder) !important', width: '100%' }}
                 />
                 {searchQuery && (
                     <IconButton
-                        onClick={() => {  setProperty("searchQuery" as any,'') }}
+                        onClick={() => {
+                            clearTimeout(debounceTimer.current);
+                            setProperty("searchQuery" as any, '');
+                            setInputValue('');
+                        }}
                         size="large"
                         sx={{ position: 'absolute', right: '8px', color: 'var(--alertGrayBackground) !important' }}
                     >
@@ -1017,7 +1032,7 @@ function ItemSearcher_V2(props: ItemSearcher_V2Props): React.ReactElement {
                 <List sx={{ width: '100%' }} component="nav">
                     {props.setting?.simpleSearch && searchQuery && filteredItems.length > 0 ? (
                         filteredItems.map((item, index) => (
-                            <ListItemButton key={index} sx={{minHeight:'35px'}}>
+                            <ListItemButton key={index} sx={{ minHeight: '35px' }}>
                                 {item.img && typeof item.img === 'string' && item.img.trim() !== '' && (
                                     <Box
                                         component="img"
@@ -1063,8 +1078,8 @@ const ItemSearcher_V2ElementRegistration: FormElementRegistration<ItemSearcher_V
     component: ItemSearcher_V2,
     id: "ItemSearcher_V2",
     getInitialProperties: () => ({
-        itemData: [{name:"Cate1",items:[{name:"ItemA"}]},{name:"Cate2",checkbox:true,items:[{name:"ItemB"}]}],
-        setting: {initialCollapse:true,checkbox:true,showCount:true},
+        itemData: [{ name: "Cate1", items: [{ name: "ItemA" }] }, { name: "Cate2", checkbox: true, items: [{ name: "ItemB" }] }],
+        setting: { initialCollapse: true, checkbox: true, showCount: true },
     }),
 };