Skip to content

Commit 9db5e7b

Browse files
authored
feat(Dropdown): Added support for setting height for dropdown (#10149)
* feat(Dropdown): Added support for setting height for dropdown * apply isScrollable to menu if maxMenuHeight or menuHeight is defined
1 parent 908f1fb commit 9db5e7b

File tree

1 file changed

+12
-2
lines changed

1 file changed

+12
-2
lines changed

packages/react-core/src/components/Dropdown/Dropdown.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,10 @@ export interface DropdownProps extends MenuProps, OUIAProps {
6565
zIndex?: number;
6666
/** Additional properties to pass to the Popper */
6767
popperProps?: DropdownPopperProps;
68+
/** Height of the dropdown menu */
69+
menuHeight?: string;
70+
/** Maximum height of dropdown menu */
71+
maxMenuHeight?: string;
6872
}
6973

7074
const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -83,6 +87,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
8387
zIndex = 9999,
8488
popperProps,
8589
onOpenChangeKeys = ['Escape', 'Tab'],
90+
menuHeight,
91+
maxMenuHeight,
8692
...props
8793
}: DropdownProps) => {
8894
const localMenuRef = React.useRef<HTMLDivElement>();
@@ -138,6 +144,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
138144
};
139145
}, [isOpen, menuRef, toggleRef, onOpenChange, onOpenChangeKeys]);
140146

147+
const scrollable = maxMenuHeight !== undefined || menuHeight !== undefined || isScrollable;
148+
141149
const menu = (
142150
<Menu
143151
className={css(className)}
@@ -147,11 +155,13 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
147155
shouldFocusToggleOnSelect && toggleRef.current.focus();
148156
}}
149157
isPlain={isPlain}
150-
isScrollable={isScrollable}
158+
isScrollable={scrollable}
151159
{...props}
152160
{...ouiaProps}
153161
>
154-
<MenuContent>{children}</MenuContent>
162+
<MenuContent menuHeight={menuHeight} maxMenuHeight={maxMenuHeight}>
163+
{children}
164+
</MenuContent>
155165
</Menu>
156166
);
157167
return (

0 commit comments

Comments
 (0)