Description

Duration Issue

• #2233

Solution

Resets the closeTimerRemainingTimeRef when the Toast rerenders with the new duration, in case the component is initially rendered with duration={Infinity}

Toast.Close issue

• #2221

Solution

Similarly, resets the isClosePausedRef when a new Toast is added to fix the case where the handlePause function triggers while clicking the dismiss/close button, setting isClosePausedRef.current to true but preventing the handleResume function to set isClosePausedRef.current back to false and calling startTimer function on the next Toast.

https://github.com/radix-ui/primitives/blob/eca6babd188df465f64f23f3584738b85dba610e/packages/react/toast/src/Toast.tsx#L538

Other possible solutions

Using let instead of ref

Instead of using a ref, we could use normal variables to solve those issues. I didn't want to change without knowing if the ref was useful. So I'm just resetting the values for now.

• closeTimerRemainingTimeRef resets on every rerender to be always up-to-date with the new duration value
  • This one I think could be a simple let variable, since it changes on every rerender.
• isClosePausedRef resets every time there's a new Toast so the startTimer function triggers as expected
  • I'm not sure about this one, so I'll leave it up to you.

Is it possible to get a maintainer to review this so we can get it merged?

I would also suggest moving clearTimeout above the guard clause - because we always want to cancel the timeout when trying to start a new one. https://github.com/radix-ui/primitives/blob/be208ef8ce3f24b6616d916688ee1e4812d5e0e3/packages/react/toast/src/Toast.tsx#L510-L512

Say I had a duration of 5 seconds but then changed it to Infinity - if left as is it would still close after 5 second. With this fix it will correctly update itself to never close.

My personal use-case is I have my notifications stacks(like in Sonnar in shadcn) - and I need duration to be dynamic so that only the top notification has a timer on it and all the notifications below are on hold until they are on top.

Any reason why this is still open after over a year?

We are still interested in this fix, it would be nice to hear from a project maintainer

Fix is to use https://ark-ui.com/react/docs/components/toast or https://sonner.emilkowal.ski/