Merge pull request #490 from devtron-labs/fix/select-auto-focus

fix: auto focus issue for select picker

Author: eshankvaish

package-lock.json

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

package.json

@@ -284,10 +284,9 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                 {...valueContainerProps}
                 showSelectedOptionsCount={showSelectedOptionsCount}
                 customSelectedOptionsCount={customSelectedOptionsCount}
-                isFocussed={isFocussed}
             />
         ),
-        [showSelectedOptionsCount, customSelectedOptionsCount, isFocussed],
+        [showSelectedOptionsCount, customSelectedOptionsCount],
     )
 
     const renderOption = useCallback(
@@ -469,6 +468,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                             onBlur={handleBlur}
                             onChange={handleChange}
                             controlShouldRenderValue={controlShouldRenderValue}
+                            isFocussed={isFocussed}
                         />
                     </div>
                 </ConditionalWrap>

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

@@ -119,15 +119,12 @@ export const SelectPickerInput = <OptionValue,>(props: InputProps<SelectPickerOp
 export const SelectPickerValueContainer = <OptionValue, IsMulti extends boolean>({
     showSelectedOptionsCount,
     customSelectedOptionsCount,
-    isFocussed,
     ...props
 }: ValueContainerProps<SelectPickerOptionType<OptionValue>> &
-    Pick<SelectPickerProps<OptionValue, IsMulti>, 'showSelectedOptionsCount' | 'customSelectedOptionsCount'> & {
-        isFocussed: boolean
-    }) => {
+    Pick<SelectPickerProps<OptionValue, IsMulti>, 'showSelectedOptionsCount' | 'customSelectedOptionsCount'>) => {
     const {
         getValue,
-        selectProps: { customDisplayText, shouldRenderTextArea },
+        selectProps: { customDisplayText, shouldRenderTextArea, isFocussed },
         children,
     } = props
 

src/Shared/Components/SelectPicker/common.tsx

@@ -98,6 +98,10 @@ declare module 'react-select/base' {
          * @default false
          */
         shouldRenderTextArea?: boolean
+        /**
+         * Custom prop for the value container for focussed state
+         */
+        isFocussed?: boolean
     }
 }