fix: border on menu and required spacing

Author: eshankvaish

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

@@ -55,6 +55,7 @@ const SelectPicker = ({
                         {typeof label === 'string' ? (
                             <span className={`flex left ${required ? 'dc__required-field' : ''}`}>
                                 <span className="dc__truncate">{label}</span>
+                                {required && <span>&nbsp;</span>}
                             </span>
                         ) : (
                             label
@@ -76,6 +77,10 @@ const SelectPicker = ({
                     }}
                     styles={selectStyles}
                     className="w-100"
+                    menuPlacement="auto"
+                    menuPosition="fixed"
+                    menuShouldScrollIntoView
+                    backspaceRemovesValue={false}
                 />
             </div>
             {error && (

src/Shared/Components/SelectPicker/type.ts

@@ -16,15 +16,13 @@ export interface SelectPickerProps
             SelectProps,
             | 'options'
             | 'value'
-            | 'isMulti'
             | 'onChange'
             | 'isSearchable'
             | 'isClearable'
             | 'isLoading'
             | 'placeholder'
             | 'hideSelectedOptions'
             | 'controlShouldRenderValue'
-            | 'backspaceRemovesValue'
             | 'closeMenuOnSelect'
             | 'isDisabled'
             | 'isLoading'
@@ -36,4 +34,5 @@ export interface SelectPickerProps
     renderMenuListFooter?: () => ReactNode
     helperText?: ReactNode
     label?: ReactNode
+    // TODO Eshank: Add support for border less
 }

src/Shared/Components/SelectPicker/utils.ts

@@ -11,6 +11,7 @@ export const getCommonSelectStyle = ({ hasError }: { hasError: boolean }) => ({
         overflow: 'hidden',
         marginBlock: '4px',
         backgroundColor: 'var(--N0)',
+        border: '1px solid var(--N200)',
         boxShadow: '0px 2px 4px 0px rgba(0, 0, 0, 0.20)',
     }),
     menuList: (base) => ({