Toast expiration is paused for new toasts, when previous toast was manually dismissed
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Environment
| Operating system | Windows 10.0.19045 |
| CPU | Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz (4 cores) |
| Node.js version | v22.20.0 |
| nuxt/cli version | 3.31.3 |
| Package manager | pnpm@10.26.1 |
| Nuxt version | 4.2.2 |
| Nitro version | 2.12.9 |
| Builder | vite@6.4.1 |
| Config | - |
| Modules | - |
Is this bug related to Nuxt or Vue?
Vue
Package
v4.x
Version
v4.3.0
Reproduction
https://ui.nuxt.com/docs/components/toast
On the official Toast demo page:
- Open a toast (e.g. the first one on the page: Add to calendar).
- Obvseve how the progress bar is elapsing.
- Manually close the toast with the X close button, before the progress bar elapses.
(The same issue also occurs, when clicking an action button in the toast.) - Open another toast.
- Observe how there is no progress bar and how the toast does not automatically close,
- Hover over the toast or switch browser tabs to re-trigger the progress bar and auto-close behavior.
Description
New toasts no longer automatically close (elapsing progress bar is missing), when a previous toast was manually closed or its actions were interacted with, until the browser tab is switched or the new toast is hovered.
Additional context
No response
Logs
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Toast component and the official Toast demo page linked in the reproduction steps. Reproduce the sequence of manually closing or interacting with one toast before opening another, then trace the expiration and progress behavior. Done means a new toast resumes its progress bar and automatically closes without requiring hover or a browser-tab switch.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxtjs, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 62/100