diff --git a/packages/ui/FloatingLayer/FloatingLayer.js b/packages/ui/FloatingLayer/FloatingLayer.js index 93e9f73521..d22dcef1e8 100644 --- a/packages/ui/FloatingLayer/FloatingLayer.js +++ b/packages/ui/FloatingLayer/FloatingLayer.js @@ -179,6 +179,10 @@ class FloatingLayerBase extends React.Component { } } + generateId = () => { + return Math.random().toString(36).substr(2, 8); + }; + handleNotify = oneOf( [forEventProp('action', 'close'), call('handleClose')], [forEventProp('action', 'mount'), call('setFloatingLayer')] @@ -243,6 +247,7 @@ class FloatingLayerBase extends React.Component { render () { const {children, open, scrimType, ...rest} = this.props; + const id = this.generateId(); delete rest.floatLayerClassName; delete rest.floatLayerId; @@ -252,13 +257,15 @@ class FloatingLayerBase extends React.Component { delete rest.onOpen; if (open && this.state.nodeRendered) { - return ReactDOM.createPortal( -
+ const portal = ReactDOM.createPortal( +
{scrimType !== 'none' ? : null} {React.cloneElement(children, {onClick: this.stopPropagation})}
, this.node ); + + return
{portal}
; } return null;