Fixed issue with filters not unchecking

packages/website/ts/components/docs/sidebar/filter.tsx

@@ -5,18 +5,33 @@ import { colors } from 'ts/style/colors';
 
 export interface IFilterProps extends IFilterCheckboxProps {
     label: string;
+    currentRefinement: string[];
     customLabel?: string;
     isDisabled?: boolean;
     value: string;
-    refine: (value: string) => void;
+    refine: (value: string | string[]) => void;
 }
 
 interface IFilterCheckboxProps {
     isRefined: boolean;
 }
 
-export const Filter: React.FC<IFilterProps> = ({ isDisabled, isRefined, label, value, customLabel, refine }) => {
-    const handleClick = () => refine(value);
+export const Filter: React.FC<IFilterProps> = ({
+    currentRefinement,
+    customLabel,
+    isDisabled,
+    isRefined,
+    label,
+    refine,
+}) => {
+    const handleClick = () => {
+        if (isRefined) {
+            const refinement = [...currentRefinement].filter((item: string) => item !== label); // Remove from current refinement
+            refine(refinement);
+        } else {
+            refine([...currentRefinement, label]); // Add to current refinement
+        }
+    };
 
     return (
         <FilterWrapper isDisabled={isDisabled} onClick={handleClick}>

packages/website/ts/components/docs/sidebar/filters_group.tsx

@@ -8,6 +8,7 @@ import { styled } from 'ts/style/theme';
 
 interface IFilterListProps {
     heading: string;
+    currentRefinement: string[];
     customLabel?: string;
     isDisabled?: boolean;
     items: IFilterProps[];
@@ -16,9 +17,8 @@ interface IFilterListProps {
     transformItems: (items: IFilterProps[]) => void;
 }
 
-const FiltersList: React.FC<IFilterListProps> = ({ items, customLabel, heading, refine }) => {
+const FiltersList: React.FC<IFilterListProps> = ({ items, currentRefinement, customLabel, heading, refine }) => {
     const [filters, setFilters] = React.useState<IFilterProps[]>([]);
-
     //    Note (Piotr): Whenever you choose a filter (refinement), algolia removes all filters that could not match the query.
     //    What we are doing instead is first grabbing the list of all possible filters on mount (or clearing all filters) and
     //    then visually disabling filters. That way the user is still able to see all filters, even those that do not apply to
@@ -31,7 +31,6 @@ const FiltersList: React.FC<IFilterListProps> = ({ items, customLabel, heading,
                 setFilters(items);
             } else {
                 const updatedFilters = [...filters];
-
                 for (const filter of updatedFilters) {
                     // Look for item corresponding to the filter we already have
                     const currentItem = items.find(item => item.label === filter.label);
@@ -39,12 +38,12 @@ const FiltersList: React.FC<IFilterListProps> = ({ items, customLabel, heading,
                     if (!currentItem) {
                         filter.isDisabled = true;
                     }
-                    // If there is a matching item and it is refined (active), we update our list of filters so that the filter is checked
-                    if (currentItem && currentItem.isRefined) {
-                        filter.isRefined = true;
+                    // If there is a matching item and it is in the current refinement, we update our list of filters so that the filter is checked
+                    if (currentItem) {
+                        const isRefined = currentRefinement.includes(filter.label);
+                        filter.isRefined = isRefined;
                     }
                 }
-
                 setFilters(updatedFilters);
             }
         },
@@ -61,7 +60,13 @@ const FiltersList: React.FC<IFilterListProps> = ({ items, customLabel, heading,
                 {heading}
             </Heading>
             {filters.map((filter: IFilterProps, index: number) => (
-                <Filter key={`filter-${index}`} customLabel={customLabel} refine={refine} {...filter} />
+                <Filter
+                    key={`filter-${index}`}
+                    currentRefinement={currentRefinement}
+                    customLabel={customLabel}
+                    refine={refine}
+                    {...filter}
+                />
             ))}
         </FiltersGroupWrapper>
     );