Dismiss and duration don't work on a custom toast

[benjamin-benoit]

Hello, I did a custom toast using a component:

toast.custom(<ScheduledToaster />);

But I can't use the duration like that:

toast.custom(<ScheduledToaster />, { duration: 10000 });

And I can't use toast.dismiss(), to remove all custom toasts, only toast.remove() is working.

[peniqliotuv]

+1 to this - only calling toast.remove() and toast.remove(id) is working for me as well -- I'm using toast() instead of toast.custom() though

[timolins]

Is it possible that it works, but is delayed for 1 second? This is because toast.dismiss() doesn't remove the toast instantly. It waits for one second in order to leave room an unmount animation. toast.custom() currently doesn't apply any animations – #116.

You can react to t.visible to hide it yourself.

Seems to be related to #173

[benjamin-benoit]

@timolins It never disappear for me...

without doing a custom toast toast(<ScheduledToaster cart={cart} />, { duration: 10000 });

It work, but I see a empty toast upper of mine...

[timolins]

Can you please provide an example which reproduces this issue? It works fine on my end: https://codesandbox.io/s/react-hot-toast-custom-toast-dismiss-re8xhs

[AngheloGc]

Hi. I also ran into this issue. Here I have replicated the case: https://codesandbox.io/s/react-hot-toast-dismiss-and-duration-bug-krbt1p?file=/src/TestView.tsx

[brandonpittman]

I'm doing something like this with Framer Motion and it's working well.

Toast caller:

  useEffect(() => {
    if (message) {
      toast.custom(
        (t) => (
          <Notification
            isVisible={t.visible}
            onDismiss={() => toast.dismiss(t.id)}
          >
            {message}
          </Notification>
        ),
        { duration: 20000 }
      );
    }
  }, [message]);

Notification component:

<AnimatePresence>
  {isVisible && (
    <motion.div
      key="notification"
      initial={initial}
      animate={animate}
      exit={exit}
      role="alert"
    >
  </motion.div
</AnimatePresence>

[brandonpittman]

Can you please provide an example which reproduces this issue? It works fine on my end: https://codesandbox.io/s/react-hot-toast-custom-toast-dismiss-re8xhs

In this example, because t.visible starts as true, the enter transition does nothing. It just pops into existence. The exit transition does work because RHT waits 1 second before removing the element from the DOM.

[seanmcquaid]

Also seeing this as well with custom toasts. For now, I am just using a useEffect in the custom component to clear the toast.

[deepaktammali]

We are facing this issue as well with custom toasts.

[kylegillen]

In my case, adding type="button" to the button element that was ultimately calling () => toast.dismiss(t.id) fixed the issue 🤷‍♂️

[felipemullen]

There is definitely something strange happening on custom toasts. In my case, calling toast.custom causes the popup to occasionally hang unless I change to another tab or mouse over the browser's inspector window:

toast.custom((t) => <PlayerWinsHand winningPlayer={player} toast={t} />, { duration: 1250 });

I have to manually dismiss using toast.dismiss