fix(select): select menu shadow and borderRadius fix

treely · Oct 4, 2024 · 8b1aafa · 8b1aafa
1 parent 1e30161
commit 8b1aafa
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -162,6 +162,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
         if (onClose) onClose();
       }}
       matchWidth
+      data-testid="select-menu"
     >
       {({ isOpen }) => (
         <>
@@ -184,6 +185,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
             role="combobox"
             width={isFullWidth ? '100%' : 'auto'}
             tabIndex={isDisabled ? -1 : 0}
+            data-testid="select-menu-button"
           >
             <Flex alignItems="center" justifyContent="space-between">
               <Text
@@ -195,6 +197,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
                 overflow="hidden"
                 textOverflow="ellipsis"
                 flexShrink={1}
+                data-testid="select-menu-item-input"
               >
                 {selectedOptions.length > 0 && isMultiple ? (
                   <>
@@ -239,12 +242,12 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
               mt="2"
               p="2"
               borderRadius="lg"
-              boxShadow="md"
               role="listbox"
               bg="white"
               maxHeight={dynamicMaxHeight}
               overflowY="auto"
               zIndex="popover"
+              data-testid="select-menu-list"
             >
               {isSearchable && (
                 <InputGroup mb="4">
@@ -304,9 +307,10 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
                         key={value}
                         onClick={() => handleOptionSelect(value, disabled)}
                         isDisabled={disabled}
-                        borderRadius={CustomizedSelect.variants[variant].borderRadius}
+                        borderRadius="md"
                         icon={null}
                         iconSpacing="0"
+                        data-testid="select-menu-item-option"
                       >
                         <Flex justify="space-between" align="center" width="100%">
                           <Text fontSize={CustomizedSelect.sizes[size].fontSize}>