diff --git a/packages/ui/src/Menu/Menu.tsx b/packages/ui/src/Menu/Menu.tsx index 5f4f280df8d..be35059872f 100644 --- a/packages/ui/src/Menu/Menu.tsx +++ b/packages/ui/src/Menu/Menu.tsx @@ -1,5 +1,4 @@ import * as React from "react"; -import ReactDOM from "react-dom"; import { Menu as BaseMenu, MenuProps as RmwcMenuProps, @@ -51,20 +50,6 @@ type State = { menuIsOpen: boolean; }; -let el = null; -const getElement = () => { - if (!el) { - el = document.createElement("div"); - el.id = "menu-container"; - el.style.position = "fixed"; - el.style.top = "0"; - el.style.zIndex = "10"; - document.body.appendChild(el); - } - - return el; -}; - /** * Use Menu component to display a list of choices, once the handler is triggered. */ @@ -81,21 +66,6 @@ class Menu extends React.Component { anchorRef = React.createRef(); menuRef = React.createRef(); - componentDidUpdate() { - if (!this.menuRef.current || !this.anchorRef.current) { - return; - } - - const menu: any = this.menuRef.current; - - // @ts-ignore - const anchorRect = this.anchorRef.current.getBoundingClientRect(); - - menu.style.position = "absolute"; - menu.style.left = anchorRect.left - 60 + "px"; - menu.style.top = anchorRect.top + "px"; - } - openMenu = () => { this.setState({ menuIsOpen: true }, () => this.props.onOpen && this.props.onOpen()); }; @@ -105,19 +75,17 @@ class Menu extends React.Component { }; renderMenuWithPortal = () => { - return ReactDOM.createPortal( -
}> - - {this.props.children} - -
, - getElement() + return ( + + {this.props.children} + ); };