Skip to content

Commit

Permalink
fix(Portal): ignore document click if no node or portal (#823)
Browse files Browse the repository at this point in the history
* refactor(Portal): consolidate !open checks in renderPortal

* fix(portal): clean up event handlers when re-rendering

* fix(Portal): ignore document click if no node or portal
  • Loading branch information
levithomason authored Nov 10, 2016
1 parent 0185032 commit 9b6e3c2
Showing 1 changed file with 15 additions and 8 deletions.
23 changes: 15 additions & 8 deletions src/addons/Portal/Portal.js
Original file line number Diff line number Diff line change
Expand Up @@ -122,10 +122,10 @@ class Portal extends Component {

static _meta = _meta

state = {}

componentDidMount() {
if (this.state.open) {
this.renderPortal()
}
this.renderPortal()
}

componentDidUpdate(prevProps, prevState) {
Expand All @@ -134,9 +134,7 @@ class Portal extends Component {
// within this method.

// If the portal is open, render (or re-render) the portal and child.
if (this.state.open) {
this.renderPortal()
}
this.renderPortal()

if (prevState.open && !this.state.open) {
debug('portal closed')
Expand All @@ -159,8 +157,8 @@ class Portal extends Component {
handleDocumentClick = (e) => {
const { closeOnDocumentClick, closeOnRootNodeClick } = this.props

// If event happened in the portal, ignore it
if (this.portal.contains(e.target)) return
// If not mounted, no portal, or event happened in the portal, ignore it
if (!this.node || !this.portal || this.portal.contains(e.target)) return

if (closeOnDocumentClick || (closeOnRootNodeClick && this.node.contains(e.target))) {
debug('handleDocumentClick()')
Expand Down Expand Up @@ -320,6 +318,9 @@ class Portal extends Component {
}

renderPortal() {
if (!this.state.open) return
debug('renderPortal()')

const { children, className } = this.props

this.mountPortal()
Expand All @@ -329,6 +330,12 @@ class Portal extends Component {

this.node.className = className || ''

// when re-rendering, first remove listeners before re-adding them to the new node
if (this.portal) {
this.portal.removeEventListener('mouseleave', this.handlePortalMouseLeave)
this.portal.removeEventListener('mouseover', this.handlePortalMouseOver)
}

ReactDOM.unstable_renderSubtreeIntoContainer(
this,
Children.only(children),
Expand Down

0 comments on commit 9b6e3c2

Please sign in to comment.