Skip to content

[Toast] Re-triggering a toast during exit animation breaks stack indexing, incorrectly applying data-behind #5253

Description

@necoss

Bug report

Current behavior

When triggering multiple toasts, if you re-trigger a specific toast at the exact moment it begins its exit animation (disappearing), it breaks the internal state and indexing of the Toast Manager.

Steps to reproduce:

  1. Trigger Toast 1.
  2. Trigger Toast 2.
  3. Wait for Toast 1 to begin its exit animation (starts disappearing).
  4. At the exact moment Toast 1 starts exiting, trigger Toast 1 again.

Link to editor: https://stackblitz.com/edit/gsudazvb?file=src%2FApp.tsx

Actual result:

  1. Toast 2 abruptly disappears.
  2. Toast 1 remains visible on the screen but its content (title/description text) is completely missing (renders empty).
  3. It appears that the Toast Manager miscalculates the active toasts' index/stacking order, applying the data-behind attribute to the visible toast. This hides the inner Toast.Content (which has data-behind:opacity-0) while the empty Toast.Root container just hangs on the screen until its timer expires.

Note: This bug is also reproducible directly on the official Base UI documentation examples.

Expected behavior

Re-triggering a toast while it is in its exit phase should reset its duration timer and restore its opacity/transform cleanly with all its content intact. Furthermore, interacting with one toast should not cause completely unrelated active toasts (like Toast 2) to unmount or disappear unexpectedly.

Reproducible example

Since this occurs on the official Base UI documentation, it can be tested directly there. However, here is how my toast manager is configured if you need to reproduce it in a sandbox: https://stackblitz.com/edit/gsudazvb?file=src%2FApp.tsx

Base UI version

@base-ui/react: "^1.4.1",

Which browser are you using?

Google Chrome 149.0.7827.103

Which OS are you using?

MacOS Tahoe 26.0.1

Which assistive tech are you using (if applicable)?

None

Additional context

In my implementation (and seemingly in the official docs), the bug seems to stem from the core useToastManager state reconciliation. When a toast is caught between the data-ending-style phase and being re-added to the queue, the manager appears to lose track of the correct --toast-index and active state. It treats the re-triggered toast as being "behind" another toast (applying data-behind), which completely hides the text content while keeping the root container mounted and visible.

2026-07-16.14.36.20.mov

Metadata

Metadata

Assignees

No one assigned

    Labels

    component: toastChanges related to the toast component.type: bugIt doesn't behave as expected.

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions