diff --git a/src/components/BoemlyFormControl/BoemlyFormControl.tsx b/src/components/BoemlyFormControl/BoemlyFormControl.tsx index 85243d6..3c97a2b 100644 --- a/src/components/BoemlyFormControl/BoemlyFormControl.tsx +++ b/src/components/BoemlyFormControl/BoemlyFormControl.tsx @@ -64,6 +64,8 @@ export interface BoemlyFormControlProps extends StyleProps { isInvalid?: boolean; isReadOnly?: boolean; isDisabled?: boolean; + + dropdownWidth?: string; } export const BoemlyFormControl: React.FC = ({ @@ -91,6 +93,8 @@ export const BoemlyFormControl: React.FC = ({ isReadOnly = false, isDisabled = false, + dropdownWidth, + ...styleProps }: BoemlyFormControlProps) => { const [isMobile] = useMediaQuery(BREAKPOINT_MD_QUERY); @@ -118,6 +122,7 @@ export const BoemlyFormControl: React.FC = ({ bgColor="white" {...{ isDisabled, isInvalid, ...selectProps }} options={selectOptions} + dropdownWidth={dropdownWidth} /> ); case 'Checkbox': diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index 9e55244..ef72c69 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -44,6 +44,7 @@ export interface BoemlySelectProps extends Omit void; onClose?: () => void; @@ -64,6 +65,7 @@ export const BoemlySelect: React.FC = ({ preventDeselection = false, selectAllText = 'Select All', size = 'md', + dropdownWidth, variant = 'outline', borderColor = CustomizedSelect.variants[variant].borderColor, backgroundColor = CustomizedSelect.variants[variant].backgroundColor, @@ -259,6 +261,7 @@ export const BoemlySelect: React.FC = ({ maxHeight={dynamicMaxHeight} overflowY="auto" zIndex="popover" + width={dropdownWidth} > {isSearchable && (