Merge pull request #270 from devtron-labs/fix/select-picker-menu-footer

fix: closure issue with renderMenuListFooter

Author: eshankvaish

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

@@ -17,7 +17,6 @@
 import ReactSelect, {
     ControlProps,
     GroupHeadingProps,
-    MenuListProps,
     MultiValueProps,
     OptionProps,
     SelectInstance,
@@ -182,10 +181,9 @@ import { SelectPickerOptionType, SelectPickerProps, SelectPickerVariantType } fr
  * />
  * ```
  */
-const SelectPicker = <OptionValue, IsMulti extends boolean>({
+const SelectPicker = <OptionValue extends string | number, IsMulti extends boolean>({
     error,
     icon,
-    renderMenuListFooter,
     helperText,
     placeholder = 'Select a option',
     label,
@@ -201,7 +199,6 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
     isMulti,
     name,
     classNamePrefix,
-    renderCustomOptions,
     shouldRenderCustomOptions = false,
     isSearchable,
     selectRef,
@@ -264,18 +261,6 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
         [icon, shouldShowSelectedOptionIcon],
     )
 
-    const renderMenuList = useCallback(
-        (menuProps: MenuListProps<SelectPickerOptionType<OptionValue>>) => (
-            <SelectPickerMenuList
-                {...menuProps}
-                renderMenuListFooter={renderMenuListFooter}
-                renderCustomOptions={renderCustomOptions}
-                shouldRenderCustomOptions={shouldRenderCustomOptions}
-            />
-        ),
-        [shouldRenderCustomOptions],
-    )
-
     const renderValueContainer = useCallback(
         (valueContainerProps: ValueContainerProps<SelectPickerOptionType<OptionValue>>) => (
             <SelectPickerValueContainer
@@ -335,6 +320,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
             'aria-invalid': !!error,
             'aria-labelledby': labelId,
             hideSelectedOptions: false,
+            shouldRenderCustomOptions: shouldRenderCustomOptions || false,
         }),
         [
             name,
@@ -348,6 +334,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
             error,
             labelId,
             isMulti,
+            shouldRenderCustomOptions,
         ],
     )
 
@@ -386,7 +373,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                                     DropdownIndicator: SelectPickerDropdownIndicator,
                                     Control: renderControl,
                                     Option: renderOption,
-                                    MenuList: renderMenuList,
+                                    MenuList: SelectPickerMenuList,
                                     ClearIndicator: SelectPickerClearIndicator,
                                     ValueContainer: renderValueContainer,
                                     MultiValueLabel: renderMultiValueLabel,
@@ -410,7 +397,7 @@ const SelectPicker = <OptionValue, IsMulti extends boolean>({
                                     DropdownIndicator: SelectPickerDropdownIndicator,
                                     Control: renderControl,
                                     Option: renderOption,
-                                    MenuList: renderMenuList,
+                                    MenuList: SelectPickerMenuList,
                                     ClearIndicator: SelectPickerClearIndicator,
                                     ValueContainer: renderValueContainer,
                                 }}

src/Shared/Components/SelectPicker/common.tsx

@@ -173,19 +173,12 @@ export const SelectPickerOption = <OptionValue, IsMulti extends boolean>({
     )
 }
 
-export const SelectPickerMenuList = <OptionValue, IsMulti extends boolean>({
-    renderMenuListFooter,
-    shouldRenderCustomOptions,
-    renderCustomOptions,
-    ...props
-}: MenuListProps<SelectPickerOptionType<OptionValue>> &
-    Pick<
-        SelectPickerProps<OptionValue, IsMulti>,
-        'renderMenuListFooter' | 'shouldRenderCustomOptions' | 'renderCustomOptions'
-    >) => {
+export const SelectPickerMenuList = <OptionValue extends string | number>(
+    props: MenuListProps<SelectPickerOptionType<OptionValue>>,
+) => {
     const {
         children,
-        selectProps: { inputValue, value },
+        selectProps: { inputValue, value, renderMenuListFooter, shouldRenderCustomOptions, renderCustomOptions },
     } = props
 
     return (

src/Shared/Components/SelectPicker/type.ts

@@ -19,6 +19,8 @@ import { ComponentSizeType } from '@Shared/constants'
 import { MutableRefObject, ReactElement, ReactNode } from 'react'
 import { GroupBase, GroupHeadingProps, Props as ReactSelectProps, SelectInstance } from 'react-select'
 import { CreatableProps } from 'react-select/creatable'
+// This import allows to extend the base interface in react-select module via module augmentation
+import type {} from 'react-select/base'
 
 export interface SelectPickerOptionType<OptionValue = string | number> extends OptionType<OptionValue, ReactNode> {
     /**
@@ -35,17 +37,41 @@ export interface SelectPickerOptionType<OptionValue = string | number> extends O
     endIcon?: ReactElement
 }
 
-export enum SelectPickerVariantType {
-    DEFAULT = 'default',
-    BORDER_LESS = 'border-less',
-}
-
 type SelectProps<OptionValue, IsMulti extends boolean> = ReactSelectProps<
     SelectPickerOptionType<OptionValue>,
     IsMulti,
     GroupBase<SelectPickerOptionType<OptionValue>>
 >
 
+declare module 'react-select/base' {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
+        /**
+         * Render function for the footer at the bottom of menu list. It is sticky by default
+         */
+        renderMenuListFooter?: (selectedOptions: SelectProps<string | number, IsMulti>['value']) => ReactNode
+        /**
+         * If true, custom options are rendered in the menuList component of react select
+         *
+         * Note: renderCustomOptions is required to be passed; renderMenuListFooter is also not called
+         *
+         * @default false
+         */
+        shouldRenderCustomOptions?: boolean
+        /**
+         * Callback handler for custom options
+         *
+         * Imp Note: The menu open/close needs to handled by the consumer in this case
+         */
+        renderCustomOptions?: () => ReactElement
+    }
+}
+
+export enum SelectPickerVariantType {
+    DEFAULT = 'default',
+    BORDER_LESS = 'border-less',
+}
+
 export type SelectPickerProps<OptionValue = number | string, IsMulti extends boolean = false> = Pick<
     SelectProps<OptionValue, IsMulti>,
     | 'name'
@@ -72,6 +98,9 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
     | 'onMenuClose'
     | 'autoFocus'
     | 'onBlur'
+    | 'renderMenuListFooter'
+    | 'shouldRenderCustomOptions'
+    | 'renderCustomOptions'
 > &
     Required<Pick<SelectProps<OptionValue, IsMulti>, 'inputId'>> & {
         /**
@@ -82,10 +111,6 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
          * Error message for the select
          */
         error?: ReactNode
-        /**
-         * Render function for the footer at the bottom of menu list. It is sticky by default
-         */
-        renderMenuListFooter?: (selectedOptions: SelectProps<OptionValue, IsMulti>['value']) => ReactNode
         /**
          * Info text for the select, if any
          */
@@ -195,29 +220,7 @@ export type SelectPickerProps<OptionValue = number | string, IsMulti extends boo
         : {
               isMulti?: never
               multiSelectProps?: never
-          }) &
-    (
-        | {
-              /**
-               * If true, custom options are rendered in the menuList component of react select
-               *
-               * Note: renderCustomOptions is required to be passed; renderMenuListFooter is also not called
-               *
-               * @default false
-               */
-              shouldRenderCustomOptions: boolean
-              /**
-               * Callback handler for custom options
-               *
-               * Imp Note: The menu open/close needs to handled by the consumer in this case
-               */
-              renderCustomOptions: () => ReactElement
-          }
-        | {
-              shouldRenderCustomOptions?: never
-              renderCustomOptions?: never
-          }
-    )
+          })
 
 // Doing like this, because of global export error GroupHeadingPropsDefinedProps
 export type SelectPickerGroupHeadingProps<OptionValue> = GroupHeadingProps<SelectPickerOptionType<OptionValue>> & {