Toasts Closing Unexpectedly on First Page Load

[Jeesson]

Description

When the page is loaded for the first time, all toast notifications close together with the first toast. However, if subsequent toasts have shorter durations than the first, they disappear as expected. Once all toasts are closed during the initial occurrence, the issue resolves, and everything works correctly from that point onward.

Steps to Reproduce

1. Open the application in a fresh browser session.
2. Trigger multiple toast notifications with different durations.
3. Observe that all toasts close simultaneously with the first toast.
4. After this initial behavior, trigger additional toasts and notice they work as intended.

Expected Behavior

Toast notifications should observe their individual durations from the first load onward.

Additional Information

• Browsers Tested: Latest versions of multiple browsers (Chrome, Firefox, etc.).
• Devices Tested: Multiple machines with consistent behavior observed.
• Possible Cause: Could be related to the toast initialization logic during the first load.

Suggestions

Investigate how toast durations are being handled during the initial rendering and loading phase.

[DanielHudson]

When triggering a toast with a set duration, adding additional toasts before the first toast’s duration elapses causes all toasts to disappear. After this, the functionality seems to return to normal.

This appears to be a bug with the package. I haven’t had time to investigate the root cause, but I wanted to share a potential workaround:

• On onMounted, trigger a toast with a very short duration (e.g., 5ms).
• Use a timeout (e.g., 10ms) to initialize toasts, or a watcher that handles subsequent toasts.

Here’s an example:

onMounted(() => {
  toast('', { duration: delay }); 

  setTimeout(() => {
    initialized.value = true;

    // Add a initial toasts/watchers here as necessary...

  }, delay.value * 2);
});

<Toaster v-show="initialized" />

[Jeesson]

Hi @DanielHudson, I noticed the issue with toasts closing unexpectedly after triggering multiple notifications appeared starting after version 1.1.5 of vue-sonner.

If you haven’t already, you might want to test this behavior with versions before 1.2.0 (e.g., 1.1.5) to confirm the regression. For now, it could be helpful to check the release notes or open a bug report to ensure the maintainers are aware of the issue.

Let me know if you need further details or testing! 😊