feat: add input value retention in select picker for multi select

Author: eshankvaish

src/Shared/Components/SelectPicker/FilterSelectPicker.tsx

@@ -22,7 +22,6 @@ const FilterSelectPicker = ({
     ...props
 }: FilterSelectPickerProps) => {
     const [isMenuOpen, setIsMenuOpen] = useState(false)
-    const [inputValue, setInputValue] = useState('')
 
     const [selectedOptions, setSelectedOptions] = useState<SelectPickerOptionType[]>(
         structuredClone(appliedFilterOptions ?? []),
@@ -50,7 +49,7 @@ const FilterSelectPicker = ({
     }
 
     const handleSelectOnChange: SelectPickerProps<number | string, true>['onChange'] = (selectedOptionsToUpdate) => {
-        setInputValue(inputValue)
+        // setInputValue(inputValue)
         setSelectedOptions(structuredClone(selectedOptionsToUpdate) as SelectPickerOptionType[])
     }
 
@@ -111,8 +110,6 @@ const FilterSelectPicker = ({
                 isClearable={false}
                 customSelectedOptionsCount={appliedFiltersCount}
                 icon={filterIcon}
-                inputValue={inputValue}
-                onInputChange={setInputValue}
             />
         </div>
     )

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

@@ -30,6 +30,7 @@ import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled-ov
 import { ComponentSizeType } from '@Shared/constants'
 import { ConditionalWrap } from '@Common/Helper'
 import Tippy from '@tippyjs/react'
+import { isNullOrUndefined } from '@Shared/Helpers'
 import { getCommonSelectStyle, getSelectPickerOptionByValue } from './utils'
 import {
     SelectPickerMultiValueLabel,
@@ -208,8 +209,6 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     fullWidth = false,
     customSelectedOptionsCount = null,
     renderMenuListFooter,
-    inputValue,
-    onInputChange,
     isCreatable = false,
     onCreateOption,
     closeMenuOnSelect = false,
@@ -218,6 +217,8 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const [isFocussed, setIsFocussed] = useState(false)
+    const [inputValue, setInputValue] = useState('')
+
     const {
         inputId,
         required,
@@ -331,6 +332,15 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
         }
     }
 
+    const handleInputChange: ReactSelectProps['onInputChange'] = (updatedInputValue, actionMeta) => {
+        // If onInputChange is provided, then the input state should be controlled externally
+        if (props.onInputChange) {
+            props.onInputChange(updatedInputValue, actionMeta)
+            return
+        }
+        setInputValue(updatedInputValue)
+    }
+
     const handleKeyDown: ReactSelectProps['onKeyDown'] = (e) => {
         // Prevent the option from being selected if meta or control key is pressed
         if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
@@ -349,6 +359,15 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
         props.onBlur?.(e)
     }
 
+    const handleChange: ReactSelectProps<SelectPickerOptionType<OptionValue>, IsMulti>['onChange'] = (...params) => {
+        // Retain the input value on selection change
+        if (isMulti && isNullOrUndefined(props.inputValue)) {
+            setInputValue(inputValue)
+        }
+
+        props.onChange?.(...params)
+    }
+
     const commonProps = useMemo(
         () => ({
             name: name || inputId,
@@ -435,14 +454,15 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             createOptionPosition="first"
                             onCreateOption={handleCreateOption}
                             renderMenuListFooter={!optionListError && renderMenuListFooter}
-                            inputValue={inputValue}
-                            onInputChange={onInputChange}
+                            inputValue={props.inputValue ?? inputValue}
+                            onInputChange={handleInputChange}
                             icon={icon}
                             showSelectedOptionIcon={shouldShowSelectedOptionIcon}
                             onKeyDown={handleKeyDown}
                             customDisplayText={customDisplayText}
                             onFocus={handleFocus}
                             onBlur={handleBlur}
+                            onChange={handleChange}
                             controlShouldRenderValue={controlShouldRenderValue}
                         />
                     </div>

src/Shared/Components/SelectPicker/common.tsx

@@ -286,11 +286,11 @@ export const SelectPickerMultiValueLabel = <OptionValue, IsMulti extends boolean
 }
 
 export const SelectPickerMultiValueRemove = (props: MultiValueRemoveProps) => (
-    <components.MultiValueLabel {...props}>
+    <components.MultiValueRemove {...props}>
         <span className="flex dc__no-shrink">
             <ICClose className="icon-dim-12 icon-use-fill-n6" />
         </span>
-    </components.MultiValueLabel>
+    </components.MultiValueRemove>
 )
 
 export const SelectPickerGroupHeading = <OptionValue,>({