fix(extensions): fix issue with deselecting the selected filter (#668)

Author: debsmita1

workspaces/marketplace/.changeset/nervous-nails-travel.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-marketplace': patch
+---
+
+fix issue with deselecting the selected filter

workspaces/marketplace/plugins/marketplace/src/components/MarketplacePluginFilter.tsx

@@ -73,7 +73,7 @@ const AuthorFilter = () => {
 
   const handleChange = React.useCallback(
     (_e: any, value: SelectItem[]) => {
-      const newSelection = value.map(v => v.value);
+      const newSelection = value.map(v => v.label);
       filter.set(newSelection);
     },
     [filter],

workspaces/marketplace/plugins/marketplace/src/hooks/useQueryArrayFilter.ts

@@ -25,13 +25,9 @@ const evaluateParams = (
   newParams: URLSearchParams,
   filterName: string,
 ) => {
-  if (Array.isArray(newValues)) {
-    newValues.forEach(v => {
-      newParams.append(filterSearchParam, `${filterName}=${v}`);
-    });
-  } else {
-    newParams.append(filterSearchParam, `${filterName}=${newValues}`);
-  }
+  newValues.forEach(v => {
+    newParams.append(filterSearchParam, `${filterName}=${v}`);
+  });
 };
 
 export const useQueryArrayFilter = (filterName: string) => {

workspaces/marketplace/plugins/marketplace/src/shared-components/CustomSelectFilter.tsx

@@ -60,6 +60,7 @@ export const CustomSelectFilter = (props: BackstageSelectFilterProps) => {
         disableCloseOnSelect
         aria-label={props.label}
         options={props.items}
+        isOptionEqualToValue={(option, value) => option.value === value.value}
         getOptionLabel={option => option.label}
         onChange={props.onChange}
         renderOption={(renderProps, option, selectedOption) => {
@@ -72,7 +73,7 @@ export const CustomSelectFilter = (props: BackstageSelectFilterProps) => {
                 style={{ marginRight: 8 }}
                 checked={
                   props.selectedItems.find(
-                    c => c.value === option.value.toString(),
+                    c => c.label === option.label.toString(),
                   )
                     ? true
                     : selectedOption.selected