diff --git a/src/modules/Popup/Popup.d.ts b/src/modules/Popup/Popup.d.ts index 5e6e11d131..36016040af 100644 --- a/src/modules/Popup/Popup.d.ts +++ b/src/modules/Popup/Popup.d.ts @@ -57,6 +57,9 @@ export interface StrictPopupProps extends StrictPortalProps { /** Invert the colors of the popup */ inverted?: boolean + /** The node where the popup should mount. Defaults to document.body. */ + mountNode?: any + /** * Offset values in px unit to apply to rendered popup. The basic offset accepts an * array with two numbers in the form [skidding, distance]: diff --git a/src/modules/Popup/Popup.js b/src/modules/Popup/Popup.js index 4e5a405106..ac74e706f9 100644 --- a/src/modules/Popup/Popup.js +++ b/src/modules/Popup/Popup.js @@ -13,6 +13,7 @@ import { customPropTypes, getElementType, getUnhandledProps, + isBrowser, makeDebugger, SUI, useKeyOnly, @@ -68,6 +69,9 @@ export default class Popup extends Component { clearTimeout(this.timeoutId) } + // Do not access document when server side rendering + getMountNode = () => (isBrowser() ? this.props.mountNode || document.body : null) + getPortalProps = () => { debug('getPortalProps()') const portalProps = {} @@ -231,6 +235,7 @@ export default class Popup extends Component { trigger, } = this.props const { closed, portalRestProps } = this.state + const mountNode = this.getMountNode() if (closed || disabled) { return trigger @@ -285,6 +290,7 @@ export default class Popup extends Component { return (