Repository navigation
[toast] Fix remaining timer calculation in ToastStore - #5261
Conversation
sai6855
commented
Jul 17, 2026
sai6855
commented
- I have followed (at least) the PR section of the contributing guide.
commit: |
Bundle size
PerformanceTotal duration: 1,350.47 ms +67.00 ms(+5.2%) | Renders: 78 (+0) | Paint: 2,109.96 ms +103.07 ms(+5.1%)
12 tests within noise — details Metric alarms
Check out the code infra dashboard for more information about this PR. |
| timer.timeout.clear(); | ||
| const elapsed = Date.now() - timer.start; | ||
| const remaining = timer.delay - elapsed; | ||
| const remaining = timer.remaining - elapsed; |
There was a problem hiding this comment.
Why the toast never dismisses
timer.delay holds the entire duration, while timer.remaining holds the time left. pauseTimers was calculating the remaining time from timer.delay instead of timer.remaining, so repeated hover/leave cycles kept restoring almost the full duration.
Walkthrough (delay = 10s):
| Step | Action | Elapsed this segment | Correct remaining | Buggy code gives |
|---|---|---|---|---|
| 1 | Enter after 1s, leave after 1s | 1s | 10 − 1 = 9s | 10 − 1 = 9s ✓ |
| 2 | Enter after 1s, leave after 1s | 1s | 9 − 1 = 8s | 10 − 1 = 9s ✗ |
At step 2, the remaining time should be 10 − 1 − 1 = 8s, but the code calculated delay − elapsed = 10 − 1 = 9s, ignoring the 1 second already consumed in step 1. Every hover/leave cycle resets the remaining time toward the full duration, so the toast never expires.
Fix: On resume, sync timer.delay = timer.remaining so the next pause computes delay − elapsed against the actual remaining time.
✅ Deploy Preview for base-ui ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR updates the toast auto-dismiss timer bookkeeping so that paused/resumed timers correctly accumulate elapsed “active” time across multiple hover/focus pause cycles.
Changes:
- Adjust remaining-time calculation in
ToastStore.pauseTimers()to usetimer.remainingrather than the originaltimer.delay. - Add a regression test covering multiple pause/resume cycles and ensuring the toast still dismisses after the configured timeout.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/react/src/toast/store.ts | Fixes remaining-time calculation when pausing timers so time spent active is accumulated correctly across pauses. |
| packages/react/src/toast/store.test.ts | Adds test coverage for accumulated active time across repeated hover/pause cycles. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (timer.timeout) { | ||
| timer.timeout.clear(); | ||
| const elapsed = Date.now() - timer.start; | ||
| const remaining = timer.delay - elapsed; | ||
| const remaining = timer.remaining - elapsed; | ||
| timer.remaining = remaining > 0 ? remaining : 0; |
