fix: issue with is selected in filter select picker

Author: eshankvaish

src/Shared/Components/SelectPicker/FilterSelectPicker.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Devtron Inc.
  */
 
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { ReactComponent as ICFilter } from '@Icons/ic-filter.svg'
 import { ReactComponent as ICFilterApplied } from '@Icons/ic-filter-applied.svg'
 import SelectPicker from './SelectPicker.component'
@@ -21,6 +21,10 @@ const FilterSelectPicker = ({
 
     const appliedFiltersCount = appliedFilterOptions?.length ?? 0
 
+    useEffect(() => {
+        setSelectedOptions(appliedFilterOptions ?? [])
+    }, [appliedFilterOptions])
+
     const filterIcon = useMemo(
         () => (appliedFiltersCount ? <ICFilterApplied className="p-2" /> : <ICFilter className="p-2" />),
         [appliedFiltersCount],

src/Shared/Components/SelectPicker/common.tsx

@@ -122,6 +122,7 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
         selectProps: { isMulti },
         selectOption,
         isDisabled,
+        isSelected,
     } = props
     const { description, startIcon, endIcon } = data ?? {}
     const showDescription = !!description
@@ -141,7 +142,7 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
                     <Checkbox
                         onChange={noop}
                         onClick={handleChange}
-                        isChecked={props.isSelected || false}
+                        isChecked={isSelected || false}
                         value={CHECKBOX_VALUE.CHECKED}
                         rootClassName="mb-0 w-20 p-2 dc__align-self-start dc__no-shrink"
                         disabled={isDisabled}

src/Shared/Components/SelectPicker/type.ts

@@ -232,6 +232,6 @@ export interface FilterSelectPickerProps
             SelectPickerProps<number | string, true>,
             'selectRef' | 'inputId' | 'menuPosition' | 'autoFocus' | 'shouldMenuAlignRight'
         > {
-    appliedFilterOptions: SelectPickerProps<number | string, true>['options']
+    appliedFilterOptions: SelectPickerOptionType[]
     handleApplyFilter: (filtersToApply: SelectPickerOptionType<number | string>[]) => void
 }