diff --git a/app/components/DropdownMenu/DropdownMenu.js b/app/components/DropdownMenu/DropdownMenu.js index a1cbc6a3..f088efbd 100644 --- a/app/components/DropdownMenu/DropdownMenu.js +++ b/app/components/DropdownMenu/DropdownMenu.js @@ -11,6 +11,7 @@ import { fadeAndScaleIn } from 'shared/styles/animations'; import NudeButton from 'components/NudeButton'; let previousClosePortal; +let counter = 0; type Children = | React.Node @@ -28,6 +29,8 @@ type Props = { @observer class DropdownMenu extends React.Component { + id: number = `menu${counter++}`; + @observable top: ?number; @observable bottom: ?number; @observable right: ?number; @@ -37,6 +40,7 @@ class DropdownMenu extends React.Component { @observable bodyRect: ClientRect; @observable labelRect: ClientRect; @observable dropdownRef: { current: null | HTMLElement } = React.createRef(); + @observable menuRef: { current: null | HTMLElement } = React.createRef(); handleOpen = ( openPortal: (SyntheticEvent<>) => void, @@ -88,12 +92,12 @@ class DropdownMenu extends React.Component { } } - onOpen(originalFunction?: () => void) { - if (typeof originalFunction === 'function') { - originalFunction(); + onOpen = () => { + if (typeof this.props.onOpen === 'function') { + this.props.onOpen(); } this.fitOnTheScreen(); - } + }; fitOnTheScreen() { if (!this.dropdownRef || !this.dropdownRef.current) return; @@ -135,16 +139,21 @@ class DropdownMenu extends React.Component { return (
- {({ closePortal, openPortal, portal }) => ( + {({ closePortal, openPortal, isOpen, portal }) => (