fkhadra / fkhadra/react-toastify

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

Open
#1,174 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
13.4k
Forks
741
PR merge metrics
No merged PRs in 30d

Description

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

I have a `ToastContainer` with the following config:
```ts

```
And for this test I use a periodic dispatcher of toasts:
```ts
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](https://github.com/user-attachments/assets/39bd7081-ad77-4660-903a-a9899626473c)

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

Contributor guide

Open the contributing guide

Research direction

Start with the ToastContainer stacked-layout behavior and reproduce the sequence in the linked CodeSandbox: show three stacked toasts, close one, then let a queued toast appear under limit={3}. Done means queued toasts preserve the stacked layout after either user dismissal or expiration; verify both paths with the supplied periodic dispatcher.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.