fix: issue with selected option icon

Author: eshankvaish

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

@@ -11,7 +11,6 @@ import {
     SelectPickerLoadingIndicator,
     SelectPickerMenu,
     SelectPickerOption,
-    SelectPickerValueContainer,
 } from './common'
 import { SelectPickerOptionType, SelectPickerProps } from './type'
 
@@ -51,13 +50,6 @@ const SelectPicker = ({
         [],
     )
 
-    const renderValueContainer = useCallback(
-        (valueContainerProps) => (
-            <SelectPickerValueContainer {...valueContainerProps} showSelectedOptionIcon={showSelectedOptionIcon} />
-        ),
-        [showSelectedOptionIcon],
-    )
-
     return (
         <div className="flex column left top dc__gap-4">
             {/* TODO Eshank: Common out for fields */}
@@ -89,7 +81,6 @@ const SelectPicker = ({
                         Option: SelectPickerOption,
                         Menu: renderMenu,
                         ClearIndicator: SelectPickerClearIndicator,
-                        ValueContainer: renderValueContainer,
                     }}
                     styles={selectStyles}
                     className="w-100"

src/Shared/Components/SelectPicker/common.tsx

@@ -3,9 +3,8 @@ import {
     DropdownIndicatorProps,
     ControlProps,
     OptionProps,
-    MenuProps,
     ClearIndicatorProps,
-    ValueContainerProps,
+    MenuProps,
 } from 'react-select'
 import { Progressing } from '@Common/Progressing'
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
@@ -35,39 +34,23 @@ export const SelectPickerControl = ({
 }: ControlProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'icon' | 'showSelectedOptionIcon'>) => {
     const { children, getValue } = props
     const { startIcon, endIcon } = getValue()?.[0] ?? {}
-    // Show the display icon if either the selected option icon is not to be shown or not available
-    const showDisplayIcon = !!(icon && (!showSelectedOptionIcon || !(startIcon || endIcon)))
+
+    let iconToDisplay = icon
+
+    if (showSelectedOptionIcon && (startIcon || endIcon)) {
+        iconToDisplay = startIcon || endIcon
+    }
 
     return (
         <components.Control {...props}>
-            {showDisplayIcon && <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{icon}</div>}
+            {iconToDisplay && (
+                <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">{iconToDisplay}</div>
+            )}
             {children}
         </components.Control>
     )
 }
 
-export const SelectPickerValueContainer = ({
-    showSelectedOptionIcon,
-    ...props
-}: ValueContainerProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'showSelectedOptionIcon'>) => {
-    const { children, getValue, hasValue } = props
-    const { startIcon, endIcon } = getValue()?.[0] ?? {}
-    const showIcon = !!(showSelectedOptionIcon && hasValue && (startIcon || endIcon))
-
-    return (
-        <components.ValueContainer {...props}>
-            <div className="flex left dc__gap-8">
-                {showIcon && (
-                    <div className="dc__no-shrink icon-dim-20 flex dc__fill-available-space">
-                        {startIcon || endIcon}
-                    </div>
-                )}
-                {children}
-            </div>
-        </components.ValueContainer>
-    )
-}
-
 export const SelectPickerLoadingIndicator = () => <Progressing />
 
 export const SelectPickerOption = (props: OptionProps<SelectPickerOptionType>) => {