Skip to content

[Bug] Elements don't respect stacked layout in ToastContainer #1174

@ratasorin

Description

@ratasorin

I would like to report a bug in the current implementation of the stacked toasts:

I have a ToastContainer with the following config:

<ToastContainer
	position="top-right"
	autoClose={10_000}
	closeOnClick
	pauseOnFocusLoss
	draggable
	pauseOnHover
	limit={3}
	stacked
	theme={theme}
/>

And for this test I use a periodic dispatcher of toasts:

useEffect(() => {
  let counter = 0;
  setInterval(() => {
	toast(`No ${counter}. This is notification number: ${counter}`, { hideProgressBar: true });
	counter++;
  }, 1000);
}, []);

The result is illustrated in the following video:
demo

Here is also a codesandbox:
https://codesandbox.io/p/sandbox/gdp6cq

When a toast is closed (regardless of method: user action/expiration time) and a new toast is added from a queue (imposed by the limit=3 prop) it feels like they do not respect the stacked property of ToastContainer

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions