diff --git a/packages/react-core/src/next/components/Dropdown/Dropdown.tsx b/packages/react-core/src/next/components/Dropdown/Dropdown.tsx index f260369e4ff..0c2a68c30ad 100644 --- a/packages/react-core/src/next/components/Dropdown/Dropdown.tsx +++ b/packages/react-core/src/next/components/Dropdown/Dropdown.tsx @@ -32,6 +32,14 @@ export interface DropdownProps extends MenuProps, OUIAProps { ouiaSafe?: boolean; /** z-index of the dropdown menu */ zIndex?: number; + /** The container to append the dropdown to. Defaults to 'inline'. + * If your dropdown is being cut off you can append it to an element higher up the DOM tree. + * Some examples: + * appendTo="inline" + * appendTo={() => document.body} + * appendTo={document.getElementById('target')} + */ + appendTo?: HTMLElement | (() => HTMLElement) | 'inline'; } const DropdownBase: React.FunctionComponent = ({ @@ -48,6 +56,7 @@ const DropdownBase: React.FunctionComponent = ({ ouiaId, ouiaSafe = true, zIndex = 9999, + appendTo = 'inline', ...props }: DropdownProps) => { const localMenuRef = React.useRef(); @@ -109,21 +118,24 @@ const DropdownBase: React.FunctionComponent = ({ } as React.CSSProperties })} {...props} + {...ouiaProps} > {children} ); - return ( -
- + const popperProps = { + trigger: toggle(toggleRef), + removeFindDomNode: true, + popper: menu, + isVisible: isOpen, + zIndex + }; + return appendTo === 'inline' ? ( +
+
+ ) : ( + ); };