fix: footer sticky issue

Author: eshankvaish

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

@@ -1,4 +1,4 @@
-import ReactSelect, { ControlProps, MenuProps, ValueContainerProps } from 'react-select'
+import ReactSelect, { ControlProps, MenuListProps, ValueContainerProps } from 'react-select'
 import { ReactElement, useCallback, useMemo } from 'react'
 import { ReactComponent as ErrorIcon } from '@Icons/ic-warning.svg'
 import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled-override.svg'
@@ -11,7 +11,7 @@ import {
     SelectPickerControl,
     SelectPickerDropdownIndicator,
     SelectPickerLoadingIndicator,
-    SelectPickerMenu,
+    SelectPickerMenuList,
     SelectPickerOption,
     SelectPickerValueContainer,
 } from './common'
@@ -50,9 +50,9 @@ const SelectPicker = ({
         [icon, showSelectedOptionIcon],
     )
 
-    const renderMenu = useCallback(
-        (menuProps: MenuProps<SelectPickerOptionType>) => (
-            <SelectPickerMenu {...menuProps} renderMenuListFooter={renderMenuListFooter} />
+    const renderMenuList = useCallback(
+        (menuProps: MenuListProps<SelectPickerOptionType>) => (
+            <SelectPickerMenuList {...menuProps} renderMenuListFooter={renderMenuListFooter} />
         ),
         [],
     )
@@ -72,7 +72,7 @@ const SelectPicker = ({
 
     return (
         <div className="flex column left top dc__gap-4">
-            {/* TODO Eshank: Common out for fields */}
+            {/* Note: Common out for fields */}
             <div className="flex column left top dc__gap-6 w-100">
                 {label && (
                     <label
@@ -101,7 +101,7 @@ const SelectPicker = ({
                                 DropdownIndicator: SelectPickerDropdownIndicator,
                                 Control: renderControl,
                                 Option: SelectPickerOption,
-                                Menu: renderMenu,
+                                MenuList: renderMenuList,
                                 ClearIndicator: SelectPickerClearIndicator,
                                 ValueContainer: renderValueContainer,
                             }}
@@ -120,7 +120,7 @@ const SelectPicker = ({
                     <span className="dc__ellipsis-right__2nd-line">{error}</span>
                 </div>
             )}
-            {/* TODO Eshank: Common out for input fields */}
+            {/* Note: Common out for input fields */}
             {helperText && (
                 <div className="flex left dc__gap-4 fs-11 lh-16 cn-7">
                     <ICInfoFilledOverride className="icon-dim-16 dc__no-shrink dc__align-self-start" />

src/Shared/Components/SelectPicker/common.tsx

@@ -4,8 +4,8 @@ import {
     ControlProps,
     OptionProps,
     ClearIndicatorProps,
-    MenuProps,
     ValueContainerProps,
+    MenuListProps,
 } from 'react-select'
 import { Progressing } from '@Common/Progressing'
 import { ReactComponent as ICCaretDown } from '@Icons/ic-caret-down.svg'
@@ -88,7 +88,7 @@ export const SelectPickerOption = (props: OptionProps<SelectPickerOptionType>) =
                 )}
                 <div className="flex-grow-1">
                     <h4 className="m-0 cn-9 fs-13 fw-4 lh-20 dc__truncate">{label}</h4>
-                    {/* TODO Eshank: Add support for custom ellipsis */}
+                    {/* Add support for custom ellipsis if required */}
                     {showDescription && <p className="m-0 fs-12 fw-4 lh-18 cn-7 dc__truncate">{description}</p>}
                 </div>
                 {endIcon && <div className="dc__no-shrink icon-dim-16 flex dc__fill-available-space">{endIcon}</div>}
@@ -97,16 +97,21 @@ export const SelectPickerOption = (props: OptionProps<SelectPickerOptionType>) =
     )
 }
 
-export const SelectPickerMenu = ({
+export const SelectPickerMenuList = ({
     renderMenuListFooter,
     ...props
-}: MenuProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'renderMenuListFooter'>) => {
+}: MenuListProps<SelectPickerOptionType> & Pick<SelectPickerProps, 'renderMenuListFooter'>) => {
     const { children } = props
 
     return (
-        <components.Menu {...props}>
-            {children}
-            {renderMenuListFooter?.()}
-        </components.Menu>
+        <components.MenuList {...props}>
+            <div className="py-4 cursor">{children}</div>
+            {/* Added to the bottom of menu list to prevent from hiding when the menu is opened close to the bottom of the screen */}
+            {renderMenuListFooter && (
+                <div className=" dc__position-sticky dc__bottom-0 dc__bottom-radius-4 bcn-0">
+                    {renderMenuListFooter()}
+                </div>
+            )}
+        </components.MenuList>
     )
 }

src/Shared/Components/SelectPicker/type.ts

@@ -11,7 +11,7 @@ export interface SelectPickerOptionType extends OptionType<number | string, Reac
 
 type SelectProps = ReactSelectProps<SelectPickerOptionType>
 
-// TODO Eshank: Add support for border less
+// TODO: Add support for border less
 export interface SelectPickerProps
     extends Pick<
             SelectProps,
@@ -28,7 +28,6 @@ export interface SelectPickerProps
             | 'isDisabled'
             | 'isLoading'
             | 'required'
-            | 'menuIsOpen'
         >,
         Required<Pick<SelectProps, 'classNamePrefix' | 'inputId' | 'name'>> {
     icon?: ReactElement

src/Shared/Components/SelectPicker/utils.ts

@@ -37,8 +37,6 @@ export const getCommonSelectStyle = ({
     menuList: (base) => ({
         ...base,
         padding: 0,
-        paddingBlock: '4px',
-        cursor: 'pointer',
     }),
     control: (base, state) => ({
         ...base,