ToastrBox are not removed after timeout expiration

[RaitoBezarius]

For a strange reason, ToastrBoxes are not removed after they expire (setTimeout triggers the remove handler).

By debugging the code, I found out that this line: https://github.com/diegoddox/react-redux-toastr/blob/master/src/ToastrBox.js#L98 never calls the onAnimationComplite for an unknown reason.

Fyi, I'm using React 0.14 and React-Redux-Toastr latest version, it seems to be a regression, because the old Redux-Toastr version worked fine for me. I had to upgrade (because I was using the github.io for the styles... it's my fault on this one >_<).

I'm not accustomed to CSSCore and low-level animation handlers to understand why this issue is happening, any idea?

EDIT: After looking Event Listeners on my DOM node (the message one), I see that the animationend and transitionend are registered for the onCSSTransitionEnd (runOnce) helper function.

My questions are:

• Does the node really trigger a transitionend or an animationend event?
• Do we add the event listener too late so that we miss the event?
• Does the runOnce throws something?
• It seems like that there is multiple handlers on the same node from runOnce, do we really run it once? If no, e.stopPropagation() may prevent the next handlers to get called, right?

EDIT2:
Browser used: Chromium 48.0 64 bits under Arch Linux (updated & all the shiny stuff).

EDIT3:
This problem applies also to ToastrConfirm.

EDIT4:
The problem seems to be due to the fact that I was not using your CSS link rather, a copy of react-redux-toastr.min.css without any fonts, it is maybe related to this then.

Then, the question is: "How to properly bundle your styles (assuming I'm using Webpack)?"

[diegoddox]

Can you please provide some information about the Browser you are using (name/version)?

A bit strange as I don't have changed anything on this area, in the new version I just rename the repo and remove the "window" object because it was causing issues on the server-side rendering.

About your questions.

1. animationend
2. I don't what do you mean by: Do we add the event listener too late.
3. It will add the event and remove when the animation is done.
4. depend on which Browser, some will run runOnce multiple times like Chrome.
   The e.stopPropagation() should not be the issue as the event is removed from the dom after the animation is done.

[RaitoBezarius]

I already provided information about the Browser in an edit.

---

• For 1: Alright.
• For 2: I mean, is the transition already finished when we add the event listener? animationend can be emitted before we listen to it, or not?
• For 3: Can it throw?
• For 4: I see, thanks!

Please, look the edits, the issue was finally related to the CSS, should I rename the issue or let it for users which may end up on the same issue as me?

[diegoddox]

2: no
3: no

You don't need to rename the issue.
If you wanna bundle the style on your project you just have to import the react-redux-toastr.css file from the lib/css/ folder.

import 'react-redux-toastr/lib/css/react-redux-toastr.css';

and on your webpack.config.js handle the css file
https://github.com/webpack/css-loader
you may take a look at this issue: webpack-contrib/css-loader#2