AutoClose starts paused on very fast updates that include a change to `type`

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

Bug

What is the current behavior?

I display a toast (autoClose: false) when a record starts saving, then update that toast to report success (autoClose: 5000) when the save is successfully complete. When the save is too fast, the 2nd state with the autoClose appears, but the autoClose is paused. Actions that unpause the toast (hover over and then out, change focus away from browser and the back) cause the timer to unpause and start it’s countdown.

I’ve determined that this occurs when you change the type of the toast and the time period between the first and second call are very fast (10ms in example below, from type: undefined to type: toast.TYPE.SUCCESS. If you keep the type the same, then everything works as expected (undefined to undefined, or SUCCESS to SUCCESS).

What is the expected behavior?

When the toast is updated from autoClose: false; type: undefined to autoClose: 5000; type: toast.TYPE.SUCCESS, the toast displays the countdown bar and begins to count down and then auto-closes.

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

Chrome + Firefox, React 18

Reproduction: https://codesandbox.io/s/jovial-sound-lcd29q?file=/src/App.js

It took a couple iterations to nail it down to the type change AND elapsed time, so the example could probably be refined down further.

[fkhadra]

Hey @tarwn, thanks for the codesanbox. I won’t have time to investigate the issue before 1 or 2 weeks (👶 incoming). Meanwhile, I can suggest a workaround. You can add a delay as follow

toast.update(toastId.current, {
        render: "Saved!",
        type: toast.TYPE.SUCCESS,
        autoClose: 5000,
        delay: 10 // this will do the trick
      });

[fkhadra]

The issue could be related to https://github.com/fkhadra/react-toastify/issues/810. If you want to test a potential fix run

yarn add react-toastify@9.0.7-fix-autoclose-2
// or with npm
npm i react-toastify@9.0.7-fix-autoclose-2