diff --git a/src/addons/Portal/Portal.d.ts b/src/addons/Portal/Portal.d.ts index e8f742cce2..94b9030146 100644 --- a/src/addons/Portal/Portal.d.ts +++ b/src/addons/Portal/Portal.d.ts @@ -42,6 +42,9 @@ export interface PortalProps { /** Initial value of open. */ defaultOpen?: boolean; + /** Event pool namespace that is used to handle component events. */ + eventPool?: string; + /** The node where the portal should mount. */ mountNode?: any; diff --git a/src/addons/Portal/Portal.js b/src/addons/Portal/Portal.js index f983367933..8d62f08f03 100644 --- a/src/addons/Portal/Portal.js +++ b/src/addons/Portal/Portal.js @@ -62,6 +62,9 @@ class Portal extends Component { /** Initial value of open. */ defaultOpen: PropTypes.bool, + /** Event pool namespace that is used to handle component events */ + eventPool: PropTypes.string, + /** The node where the portal should mount. */ mountNode: PropTypes.any, @@ -125,6 +128,7 @@ class Portal extends Component { static defaultProps = { closeOnDocumentClick: true, closeOnEscape: true, + eventPool: 'default', openOnTriggerClick: true, } @@ -372,6 +376,7 @@ class Portal extends Component { debug('mountPortal()') const { + eventPool, mountNode = isBrowser ? document.body : null, prepend, } = this.props @@ -384,8 +389,8 @@ class Portal extends Component { mountNode.appendChild(this.rootNode) } - eventStack.sub('click', this.handleDocumentClick, 'Portal') - eventStack.sub('keydown', this.handleEscape, 'Portal') + eventStack.sub('click', this.handleDocumentClick, eventPool) + eventStack.sub('keydown', this.handleEscape, eventPool) _.invoke(this.props, 'onMount', null, this.props) } @@ -393,6 +398,7 @@ class Portal extends Component { if (!isBrowser || !this.rootNode) return debug('unmountPortal()') + const { eventPool } = this.props ReactDOM.unmountComponentAtNode(this.rootNode) this.rootNode.parentNode.removeChild(this.rootNode) @@ -403,8 +409,8 @@ class Portal extends Component { this.rootNode = null this.portalNode = null - eventStack.unsub('click', this.handleDocumentClick, 'Portal') - eventStack.unsub('keydown', this.handleEscape, 'Portal') + eventStack.unsub('click', this.handleDocumentClick, eventPool) + eventStack.unsub('keydown', this.handleEscape, eventPool) _.invoke(this.props, 'onUnmount', null, this.props) } diff --git a/src/modules/Modal/Modal.d.ts b/src/modules/Modal/Modal.d.ts index dcb5d0afab..7109f4823d 100644 --- a/src/modules/Modal/Modal.d.ts +++ b/src/modules/Modal/Modal.d.ts @@ -43,6 +43,9 @@ export interface ModalProps extends PortalProps { /** A modal can appear in a dimmer. */ dimmer?: boolean | 'blurring' | 'inverted'; + /** Event pool namespace that is used to handle component events */ + eventPool?: string; + /** A Modal can be passed header via shorthand. */ header?: SemanticShorthandItem; diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js index d8cf253360..7dcb2bd0ef 100644 --- a/src/modules/Modal/Modal.js +++ b/src/modules/Modal/Modal.js @@ -70,6 +70,9 @@ class Modal extends Component { PropTypes.oneOf(['inverted', 'blurring']), ]), + /** Event pool namespace that is used to handle component events */ + eventPool: PropTypes.string, + /** Modal displayed above the content in bold. */ header: customPropTypes.itemShorthand, @@ -135,6 +138,7 @@ class Modal extends Component { dimmer: true, closeOnDimmerClick: true, closeOnDocumentClick: false, + eventPool: 'Modal', } static autoControlledProps = [ @@ -315,7 +319,7 @@ class Modal extends Component { render() { const { open } = this.state - const { closeOnDimmerClick, closeOnDocumentClick, dimmer } = this.props + const { closeOnDimmerClick, closeOnDocumentClick, dimmer, eventPool } = this.props const mountNode = this.getMountNode() // Short circuit when server side rendering @@ -353,6 +357,7 @@ class Modal extends Component { closeOnRootNodeClick={closeOnDimmerClick} {...portalProps} className={dimmerClasses} + eventPool={eventPool} mountNode={mountNode} open={open} onClose={this.handleClose}