`autoClose` with ReactToastify.minimal.css styles doesn't work on react-toastify>=7.0.0

[vaaralav]

Do you want to request a feature or report a bug? Bug :bug:

What is the current behavior? Using minimal CSS the toasts won't autoClose.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/naughty-glade-c5sq8?file=/src/App.js

If you change react-toastify version to >=5.3.0 <7.0.0, eg. 6.2.0, the toasts will close automatically.

What is the expected behavior? Toasts are automatically closed when minimal CSS is used.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? See the CodeSandbox

[vaaralav]

Investigated this with git bisect and 4d62ec985586a619eb3ea308a268e09212be4df7 is the first commit where autoClose is broken using the minimal CSS.

[ezeikel]

Getting the same behaviour but on 8.0.3 - previously working fine before upgrading.

[krconv]

Workaround; include this CSS:

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

[vaaralav]

@krconv that's the minimal CSS included in react-toastify/dist/ReactToastify.minimal.css. I believe the workaround you posted works for versions before 7.0.0

[amfredfred]

i removed "progress" from the options and it works just fine