React-toastify: Prevent duplicate with custom toastId - buggy toast appears that does not auto-close.

Created on 10 Nov 2018 · 10Comments · Source: fkhadra/react-toastify

Hello!
I am trying to prevent showing duplicated toasts using custom toastId. I am using autoClose option (2000ms). After multiple calls to e.g. toast.error() with same toastId feature works perfectly - only the first toast is being displayed. However, when autoClose time is finished and toast is ready to be closed - calling the toast.error() function results with showing the same toast once again, but this time with no autoClose timer. I deducted from experiments, that this occurs precisely when toast function is called during closing animation of the previous toast. Here is CodeSandbox snippet - to reproduce just start hitting 'Toast' button near active toast timer finish.

This bug does not appear when I am using isActive() function to prevent duplicates, however combining isActive() and setting custom toastId still causes above unwanted behaviour. For the design reasons it is important for me to be able to prevent duplicates using custom toastId, cause managing auto generated ids will quickly become quite a pain.

isActive() version:

Thanks in advance!

bug

Source

JanuszBartosz

Most helpful comment

Hello everyone,

I think I know where the bug is coming from. I'll be able to work on it in 2 weeks.

fkhadra on 24 Nov 2018

👍5 ❤3

All 10 comments

hey @JanuszBartosz,

I tried both pen, I need to investigate to figure out what is going on.

fkhadra on 11 Nov 2018

👍2

I see the same behaviour if the following is called in quick succession. The .dismiss(2) call is not working consistently. (I think it might be the same issue?) Here's a sandbox to demo: it works with a 2000ms timeout, but not 200ms:

  notifyWarn(msg: string) {
    if (msg === "") {
      toast.dismiss(2);
    } else if (!toast.isActive(2)) {
      toast(msg, { toastId: 2, type: toast.TYPE.WARNING });
    } else {
      toast.update(2, { render: msg, type: toast.TYPE.WARNING });
    }
  }

brucem1976 on 20 Nov 2018

Same issue here. After the toast disappears automatically and I try to show it again quickly after, then it won't show up with animation and autoClose doesn't work on it, and the progress bar doesn't show up. This only happens if I try to show the toast again quickly after the first one auto closes.

            if (!toast.isActive('designer_refresh')) {
                toast('test', {
                    toastId: 'designer_refresh',
                    position: 'top-right',
                    autoClose: 2000,
                    hideProgressBar: false,
                    closeOnClick: true,
                    // pauseOnHover: true,
                    draggable: true,
                    className: 'notificationToolTip',
                });
            }