Alerts forever (does not close) when with multiple components including shared

[dachinat]

Suppose I'm on page # 1 and I have a button, I can click it; an alert will show up and a click will take me to page # 2.

In case if page # 2 does make an use of withAlert and there's a shared component that uses withAlert as well, then an alert stays forever.

<SharedComponent> <-- uses withAlert
  <Page1/> <-- uses withAlert
  <Page2/> <-- uses withAlert
</SharedComponent>

I have attached a sample project, which you can run by issuing yarn start You can click on Click to alert and go to /page and an alert is not going to leave.

alerts-forever.zip

If you remove withAlert from SharedComponent or Page2 then all is fine, but in my real project, I'm using this.props.alert in both, header and other page.

Currently I have solved this by leaving withAlert only in shared component (Header in my case), and using this.context.alertContainer in place of this.props.alert in other files.

static contextTypes = {
        alertContainer: PropTypes.object
};

[schiehll]

Hey @dachinat thank you for the detailed issue! I think I managed to fix it in the latest release, please check it out and feel free to reopen if the error persist.

The new version uses the new context api so you will need React v16.3.0 to be able to use it.