AutoClose doesn't work on update

[jshap2000]

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

bug

What is the current behavior?

When updating a toast, the toast loses it's ability to autoclose (even when including autoclose in the update body). You must hover directly over the toast to close it.

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:

Create a toast. Then try to update that toast before it autocloses. The toast will now never autoclose unless you manually hover over it.

What is the expected behavior?

It should autoclose at a new clip equivalent to the time of update.

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

Chrome. This has never worked and seems to correlate with other autoclose bugs.

[fkhadra]

Hey @jshap2000 could you reproduce the issue in codesandbox please, this would speedup the fix if needed :)

[jshap2000]

https://codesandbox.io/s/dreamy-ganguly-hy9z5p?file=/src/App.js

[jshap2000]

Toast.Update.Bug.mov

Hope this video helps also. autoclose pauses until you hover over it.

[fkhadra]

@jshap2000 it seems that the codesanbox you shared has not been saved :D

[jshap2000]

https://codesandbox.io/s/react-toastify-bug-replication-hy9z5p

[jshap2000]

Let me know if that link works, try replicating the behavior in the video.

[fkhadra]

@jshap2000 it seems that the next version(v9.0.8 will be released at the end of the week) will fix this issue.

May I ask you to test in your project as well?

yarn add [email protected]
// or with npm
npm i [email protected]

[jshap2000]

Yup, the fix looks good!

[jshap2000]

Thanks!

[fkhadra]

@jshap2000 thanks for testing! Expect a new release by the end of the week

[jshap2000]

@fkhadra Sorry to circle back on this but there is still one slight bug in the update. On the very first toast it seems like there is a slight delay before autoclose progress begins. If you call update in that moment before autoclose begins the next call to update will hang the autoclose (it will never finish).

Posted a video of first the bug and then it working as long as autoclose progress begins ...

Screen.Recording.2022-08-04.at.11.16.10.AM.mov

[fkhadra]

@jshap2000 I'm having a hard time reproducing the issue. Am I doing something wrong?

Screen.Recording.2022-08-04.at.17.26.52.mov

[jshap2000]

Actually it might just have been the animation time length I was using.

[fkhadra]

The progress bar start only when the entrance animation is done

[jshap2000]

It seems like if the progress bar hasn't started yet, on a call to update, the progress bar will never start.

[jshap2000]

Is it possible to make it so that even if the progress bar hasn't started, on a call to update, it will still be able to start without having to manually hover over.

[fkhadra]

Using https://codesandbox.io/s/react-toastify-bug-replication-forked-z4lkdf I can confirm that the issue is coming from the animation timing.

.fade-in {
  animation: fade-in 5.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

Just to give a bit of context. We don't want the autoclose timer to start before the entrance animation is complete,
because if the autoClose delay is shorter than the entrance animation, you would never see the notification.
That's why we wait for the entrance animation to complete before starting the autoClose timer.

For your case, I suggest tweaking the animation duration.
Regarding

Is it possible to make it so that even if the progress bar hasn't started, on a call to update, it will still be able to start without having to manually hover over.

I'll see what is possible to do without introducing a new API. If it's too much work I'll probably postpone to next minor release

[jshap2000]

Ok thanks again for your help with all this.

[fkhadra]

You're welcome