autoclose doesn't work if `.Toastify__progress-bar--animated` doesn't have a css animation

[iMoses-Apiiro]

I'm using a custom CSS in my application and I've noticed that since updating to v9 the autoClose option no longer work. After a short debug session I've found that these are the CSS lines that were missing to fix it:

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

Not sure why, I'm guessing the code might be checking the DOM animation to trigger the action, but with it this works and I'm not even using the progress bar (hideProgressBar).

I've created an example. I separated the above CSS from the library's styles into a different file so it's easy to toggle it in and out. https://codesandbox.io/s/react-toastify-bug-replication-forked-8ouumd?file=/src/App.js

P.S. Tried updating to 9.0.8 but still the same. Using React 17 but problem seems to consist to 18 as well

[fkhadra]

Hey @iMoses-Apiiro, sorry for that.

The lib waits for the entrance animation to finish before starting the autoClose timer. The autoClose timer is linked to the progressBar animation, that's why this piece of style is needed.

So even if you don't use the progress bar, this style is still needed. That's why it's hideProgressBar and not disableProgressBar.

I might review the implementation at some point to use a real timer

[iMoses-Apiiro]

@fkhadra if you're welcoming PRs I can give it a go myself when I get a chance

[Snouzy]

same here, even with hideProgressBar disabled.

"react-toastify": "^9.1.1",