Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(Portal): ignore document click if no node or portal #823

Merged
merged 3 commits into from
Nov 10, 2016
Merged

fix(Portal): ignore document click if no node or portal #823

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ceaf891
refactor(Portal): consolidate !open checks in renderPortal
levithomason Nov 10, 2016
94c73ac
fix(portal): clean up event handlers when re-rendering
levithomason Nov 10, 2016
d4367a1
fix(Portal): ignore document click if no node or portal
levithomason Nov 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 15 additions & 8 deletions src/addons/Portal/Portal.js
View file
Open in desktop
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