fix(datagrid): Clear all button not working as expected for multiselect

packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -42,6 +42,7 @@ import { getInitialStateFromFilters } from '../utils';
 import { usePreviousValue } from '../../../../../../global/js/hooks';
 import { FilterContext } from '../FilterProvider';
 import { handleCheckboxChange } from '../handleCheckboxChange';
+import uuidv4 from '../../../../../../global/js/utils/uuidv4';
 
 const useFilters = ({
   updateMethod,
@@ -71,6 +72,7 @@ const useFilters = ({
   );
 
   const previousState = usePreviousValue({ panelOpen });
+  const filteredItemsRef = useRef();
 
   // When using batch actions we have to store the filters to then apply them later
   const prevFiltersRef = useRef(JSON.stringify(filtersState));
@@ -376,10 +378,19 @@ const useFilters = ({
             return null;
           })
           .filter(Boolean);
+        const isEqual = compareFilterItems(filteredItems);
+        if (!isEqual) {
+          filteredItemsRef.current = [...filteredItems];
+        }
+        const getKey = () => {
+          return isEqual ? { key: uuidv4() } : column;
+        };
+
         filter = (
           <MultiSelect
             {...components.MultiSelect}
             selectedItems={filteredItems}
+            key={getKey()}
             onChange={({ selectedItems }) => {
               const allOptions = filtersState[column].value;
               // Find selected items from list of options
@@ -397,6 +408,7 @@ const useFilters = ({
                   return null;
                 })
                 .filter(Boolean);
+              filteredItemsRef.current = [...foundItems];
 
               // Change selected state for those items that have been selected
               allOptions.map((a) => (a.selected = false));
@@ -438,6 +450,20 @@ const useFilters = ({
     return <React.Fragment key={column}>{filter}</React.Fragment>;
   };
 
+  const compareFilterItems = (filteredItems) => {
+    const filteredItemsId = filteredItems.map((item) => item.id) ?? [];
+    const previousFilteredItemsId =
+      filteredItemsRef?.current?.map((item) => item.id) ?? [];
+    const set1 = new Set(filteredItemsId);
+    const set2 = new Set(previousFilteredItemsId);
+    // Check if the sets have the same size (same number of unique elements)
+    if (set1.size !== set2.size) {
+      return false;
+    }
+    // Check if all elements in set1 are also present in set2 (using spread syntax)
+    return [...set1].every((element) => set2.has(element));
+  };
+
   /** This useEffect will properly handle the previous filters when the panel closes
    * 1. If the panel closes we need to call the reset fn but also store the
    * previous filters in a (new) temporary place.