From be11e0f7aeee6a95a79019992b14691b27821d9d Mon Sep 17 00:00:00 2001
From: lialila <uche0790@gmail.com>
Date: Thu, 16 Jan 2025 18:41:46 +0300
Subject: [PATCH] feat: add dropdwonWidth prop to select

---
 src/components/Select/Select.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 9e55244..e0a50d2 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -44,6 +44,8 @@ export interface BoemlySelectProps extends Omit<SelectProps, 'onChange' | 'value
   selectAllText?: string;
   value?: string[];
   size?: 'xs' | 'sm' | 'md' | 'lg';
+  // dropdownWidth addresses the issue in Firefox browser by preventing  jerky scrolling and items disappearing when there are too many items.
+  dropdownWidth?: '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   variant?: 'filled' | 'unstyled' | 'flushed' | 'outline';
   onChange?: (value: string[]) => void;
   onClose?: () => void;
@@ -64,6 +66,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
   preventDeselection = false,
   selectAllText = 'Select All',
   size = 'md',
+  dropdownWidth,
   variant = 'outline',
   borderColor = CustomizedSelect.variants[variant].borderColor,
   backgroundColor = CustomizedSelect.variants[variant].backgroundColor,
@@ -259,6 +262,7 @@ export const BoemlySelect: React.FC<BoemlySelectProps> = ({
               maxHeight={dynamicMaxHeight}
               overflowY="auto"
               zIndex="popover"
+              width={dropdownWidth}
             >
               {isSearchable && (
                 <InputGroup mb="4">