chore: updated select picker input value

Author: shivani170

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "0.3.22-beta-2",
+    "version": "0.3.22-beta-4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -15,12 +15,18 @@ const FilterSelectPicker = ({
     ...props
 }: FilterSelectPickerProps) => {
     const [isMenuOpen, setIsMenuOpen] = useState(false)
+    const [inputValue, setInputValue] = useState('')
+
     const [selectedOptions, setSelectedOptions] = useState<SelectPickerOptionType[]>(
         structuredClone(appliedFilterOptions ?? []),
     )
 
     const appliedFiltersCount = appliedFilterOptions?.length ?? 0
 
+    const handleInputChange = (_inputValue) => {
+        setInputValue(_inputValue)
+    }
+
     useEffect(() => {
         setSelectedOptions(appliedFilterOptions ?? [])
     }, [appliedFilterOptions])
@@ -39,6 +45,7 @@ const FilterSelectPicker = ({
     }
 
     const handleSelectOnChange: SelectPickerProps<number | string, true>['onChange'] = (selectedOptionsToUpdate) => {
+        setInputValue(inputValue)
         setSelectedOptions(structuredClone(selectedOptionsToUpdate) as SelectPickerOptionType[])
     }
 
@@ -85,6 +92,8 @@ const FilterSelectPicker = ({
                 isClearable={false}
                 customSelectedOptionsCount={appliedFiltersCount}
                 icon={filterIcon}
+                inputValue={inputValue}
+                onInputChange={handleInputChange}
             />
         </div>
     )

src/Shared/Components/SelectPicker/FilterSelectPicker.tsx

@@ -210,6 +210,8 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     customSelectedOptionsCount = null,
     renderMenuListFooter,
     isCreatableSingleSelect = false,
+    inputValue,
+    onInputChange,
     ...props
 }: SelectPickerProps<OptionValue, IsMulti>) => {
     const { inputId, required, isDisabled, controlShouldRenderValue = true, value, options } = props
@@ -244,8 +246,8 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     )
 
     // Used to show the create new option for creatable select and the option(s) doesn't have the input value
-    const isValidNewOption = (inputValue: string) => {
-        const trimmedInput = inputValue?.trim()
+    const isValidNewOption = (_inputValue: string) => {
+        const trimmedInput = _inputValue?.trim()
 
         return (
             isCreatable &&
@@ -310,9 +312,9 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     )
 
     const handleCreateOption: SelectPickerProps<OptionValue, true>['multiSelectProps']['onCreateOption'] = (
-        inputValue,
+        _inputValue,
     ) => {
-        const trimmedInputValue = inputValue?.trim()
+        const trimmedInputValue = _inputValue?.trim()
         if (trimmedInputValue) {
             onCreateOption(trimmedInputValue)
         }
@@ -444,6 +446,8 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                                 createOptionPosition="first"
                                 onCreateOption={handleCreateOption}
                                 renderMenuListFooter={!optionListError && renderMenuListFooter}
+                                inputValue={inputValue}
+                                onInputChange={onInputChange}
                             />
                         ) : (
                             renderSingleSelectPicker()

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

@@ -100,6 +100,8 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
     | 'autoFocus'
     | 'onBlur'
     | 'onKeyDown'
+    | 'onInputChange'
+    | 'inputValue'
 > &
     Partial<
         Pick<