Fix Toastr Removal Issue in React 18 #287
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 thetransitionend
event listener. We added the event listener in thecomponentDidMount
method and removed it in thecomponentWillUnmount
method. This ensures that the_onAnimationComplete
method is called when a transition ends onthis.toastrBoxElement
, even in React 18.We also added checks to ensure
this.toastrBoxElement
is notnull
before adding or removing the event listener. This prevents potential errors ifthis.toastrBoxElement
isnull
.With these changes, toasts should now be removed as expected in React 18.