search

diegoddox / react-redux-toastr

react-redux-toastr is a toastr message implemented with Redux
http://diegoddox.github.io/react-redux-toastr/
MIT License
752 stars 149 forks source link

Fix Toastr Removal Issue in React 18 #287

Closed jefferdo closed 1 year ago

jefferdo commented 1 year ago

In this pull request, we have addressed an issue where toasts were not being removed as expected in React 18. The problem was due to changes in how React 18 handles and batches updates, which affected the onCSSTransitionEnd function.

To resolve this, we replaced the onCSSTransitionEnd function with direct usage of the transitionend event listener. We added the event listener in the componentDidMount method and removed it in the componentWillUnmount method. This ensures that the _onAnimationComplete method is called when a transition ends on this.toastrBoxElement, even in React 18.

We also added checks to ensure this.toastrBoxElement is not null before adding or removing the event listener. This prevents potential errors if this.toastrBoxElement is null.

With these changes, toasts should now be removed as expected in React 18.

uditkhanna112 commented 11 months ago

This issue is not resolved yet, it works only if we work in Non strict mode.