Portal reopens if parent component sets its state immediately after .closePortal()

[bevesce]

Minimal example:

class NotClosingPortalContainer extends React.Component {
    constructor() {
        super(...arguments)
        this.state = {counter: 0}
        this.handleClick = () => {
            this.setState({counter: this.state.counter + 1})
        }
    }

    render() {
        return (
            <div>
                {this.state.counter}
                <Portal openByClickOn={<button>open</button>}>
                    <InsidePortal onClick={this.handleClick}>+1</InsidePortal>
                </Portal>
            </div>
        )
    }
}


class InsidePortal extends React.Component {
    constructor() {
        super(...arguments)
        this.handleClick = () => {
            this.props.closePortal()
            this.props.onClick()
        }
    }

    render() {
        return <button onClick={this.handleClick}>+1</button>
    }
}

Expected behaviour:

• NotClosingPortalContainer displays counter and button to open portal
• in the portal is a button that should increase counter and close the portal

What actually happens:

• after clicking button inside portal it is closed and then immediately reopened

I think this happens:

1. in Portal#closePortal this.setState({ active: false }) is called, but it works asynchronously
2. NotClosingPortalContainer#handleClick in this.setState(...) is called
3. NotClosingPortalContainer rerenders before Portal#state.active actual value is set to false
4. Portal receives new props and opens portal (because Portal#state.active still equals true)
5. Everything ends in a weird state

I fixed this by basically replacing Portal#state.active with Portal#active but it feels dirty. I'm pretty new to React so maybe there is a better solution?

Tests are passing.

[jdelStrother]

I believe I'm also running into this bug, but only in IE - not sure if React uses a slightly different rendering strategy there. @bevesce are you seeing it in all browsers?

[EDIT: scrap that, I do see it in all browsers. The IE behaviour I'm seeing is caused by something else]

[tajo]

This is interesting, thanks! I can confirm the weird behaviour. I think you are right with the explanation. I don't see a problem with replacing Portal#state.active with Portal#active since we don't need to trigger Portal#render anyway. Not sure why I used state in the first place other than it felt more "react way". Or am I missing something?

If not, can you please rebase this PR so it's mergeable? Thanks.

[bevesce]

I've resolved conflicts

[mattkrick]

Nuke the state in the constructor and this LGTM
https://github.com/tajo/react-portal/pull/91/files#diff-247298a69e22df733d1aac4bffc9fb06R12

[bevesce]

Done

[dwick]

this appears to be the same issue as #124, but #124 is a bit cleaner

[jtrang]

This solution works for me too! However, it solves a different issue than #124.

[tajo]

Hey, please check the new major version (complete rewrite) of react-portal: #157

It's React v16 only since its uses the new official Portal API. There is the first beta released and I would like to get your feedback. I don't have bandwidth to maintain v3 which is very different and full of hacks.

If you feel your PR still applies, please rebase it against the master and re-open it. Sorry for the lack of response in past! Thanks!