fix: handling for option comparison

Author: eshankvaish

src/Shared/Components/SelectPicker/SelectPicker.component.tsx

@@ -209,7 +209,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     shouldShowNoOptionsMessage = true,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
-    const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options } = props
+    const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options, getOptionValue } = props
     const { isGroupHeadingSelectable = false, getIsOptionValid = () => true } = multiSelectProps
 
     // Only large variant is supported for multi select picker
@@ -246,8 +246,9 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                 value as SelectPickerOptionType<OptionValue>[],
                 trimmedInput as OptionValue,
                 null,
+                getOptionValue,
             ) &&
-            !getSelectPickerOptionByValue<OptionValue>(options, trimmedInput as OptionValue, null)
+            !getSelectPickerOptionByValue<OptionValue>(options, trimmedInput as OptionValue, null, getOptionValue)
         )
     }
 

src/Shared/Components/SelectPicker/type.ts

@@ -271,7 +271,7 @@ export interface FilterSelectPickerProps
             | 'shouldMenuAlignRight'
             | 'optionListError'
             | 'reloadOptionList'
-            | 'getOptionLabel'
+            | 'getOptionValue'
         > {
     appliedFilterOptions: SelectPickerOptionType[]
     handleApplyFilter: (filtersToApply: SelectPickerOptionType<number | string>[]) => void

src/Shared/Components/SelectPicker/utils.ts

@@ -340,36 +340,28 @@ export const getGroupCheckboxValue = <OptionValue>(
  * @param optionsList - The list of options or groups of options.
  * @param value - The value to compare against the options' values.
  * @param defaultOption - The default option to return if no match is found.
+ * @param getOptionValue - Override the default value for the option
  * @returns The matched option or the default option if no match is found.
  */
 export const getSelectPickerOptionByValue = <OptionValue>(
     optionsList: OptionsOrGroups<SelectPickerOptionType<OptionValue>, GroupBase<SelectPickerOptionType<OptionValue>>>,
     value: OptionValue,
     defaultOption: SelectPickerOptionType<OptionValue> = { label: '', value: '' as unknown as OptionValue },
+    getOptionValue: SelectPickerProps<OptionValue>['getOptionValue'] = null,
 ): SelectPickerOptionType<OptionValue> => {
     if (!Array.isArray(optionsList)) {
         return defaultOption
     }
 
-    const foundOption = optionsList.reduce(
-        (acc, curr) => {
-            if (!acc.notFound) return acc
+    const flatOptionsList = optionsList.flatMap<SelectPickerOptionType<OptionValue>>((groupOrBaseOption) =>
+        'options' in groupOrBaseOption ? groupOrBaseOption.options : [groupOrBaseOption],
+    )
 
-            if ('value' in curr && curr.value === value) {
-                return { data: curr, notFound: false }
-            }
-
-            if ('options' in curr && curr.options) {
-                const nestedOption = curr.options.find(({ value: _value }) => _value === value)
-                if (nestedOption) {
-                    return { data: nestedOption, notFound: false }
-                }
-            }
-
-            return acc
-        },
-        { notFound: true, data: defaultOption },
-    ).data
+    return (
+        flatOptionsList.find((option) => {
+            const optionValue = getOptionValue ? getOptionValue(option) : option.value
 
-    return foundOption
+            return optionValue === value
+        }) ?? defaultOption
+    )
 }