diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js index b685fae85a..95bb8434ba 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +++ b/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 = ( { 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 {filter}; }; + 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.