Closing animation showing twice if dismiss is called after a very short time after showing the toast

[andreivanea]

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

What is the current behavior?
When calling toast.dismiss() directly (or shortly) after displaying a toast with autoClose: true, the closing animation is shown twice: once it transitions to the side, then the toast is again displayed in the "original", on-screen position from where it collapses to bottom.

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:

const onClick = () => {
  toast.info("Doing something...", { autoClose: false });
  // setTimeout(() => {
  toast.dismiss();
  // , 0);
};

const App = () => (
  <div>
    <button onClick={onClick}>Toast</button>
    <ToastContainer position="bottom-right" />
  </div>
);

https://codesandbox.io/s/funny-dew-zy7we?file=/index.js

The actual code where I stumbled upon this behaviour is running async (actually a Promise which often resolves quickly), that's why setTimeout is there. The same behaviour can be observed in both synch and async code.

What is the expected behavior?
After the toast close animation finishes (slide to the side), the toast should not appear again in it's original ("presentation") position and animate again to bottom.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React: 17.0.1
Browser: Chrome/Firefox (latest)

I didn't get the chance to read through the code yet. Can it be that the animation requires a forwads to keep the toast on the position in the final frame?

[fkhadra]

Hey @andreivanea thanks for reporting the issue. I've published a fix available in v7.0.1

[andreivanea]

Hey @fkhadra, that was really fast! Thanks! It works like a charm. Thank you for your work!