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

[tarwn]

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
      });

[raDiesle]

The delay trick doesnt work for us.

This issue is crucial, as growls stay open forever in our tests and in application

[fkhadra]

@raDiesle do you have a repo that you can share?

[raDiesle]

Unfortunately cant share demo.

So we figured out that migrating from 6.x to 9.x adding original css below fixes it.

Seems its also related to transition property, which if used, requires still global css to be added ( might be unexpected and a bug).

.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right
.Toastify--animate

So seems to work for us now by removing previous working transition prop as well adding global css.

Anything which looks wrong to you here ( works in v6, but breaks in v9)?

export const growlAnimations = cssTransition({ enter: css.bounceIn, exit: css.bounceOut, duration: 750, collapse: true, });

[fkhadra]

The issue could be related to #810. If you want to test a potential fix run

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