nuxt / nuxt/ui

Toast expiration is paused for new toasts, when previous toast was manually dismissed

Open
#5,791 4 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
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:

  1. Open a toast (e.g. the first one on the page: Add to calendar).
  2. Obvseve how the progress bar is elapsing.
  3. 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.)
  4. Open another toast.
  5. Observe how there is no progress bar and how the toast does not automatically close,
  6. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.