adobe / adobe/react-spectrum

Toast timers get stuck when exit animated with Framer Motion

Open
#8,053 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

Toast timers get stuck when exit animated with Framer Motion.

### 🤔 Expected Behavior?

Toast timers should never get stuck.

### 😯 Current Behavior

Toast timers get stuck.

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/upbeat-roman-gp8dgr

1. Trigger 2 toasts from the button
2. Click close button for the bottom toast
3. Move mouse away from the toast region
4. Wait until last toast closes --> all good until this point
5. Trigger 2 toasts again
6. Click close button for the bottom toast
7. Move mouse away from the toast region
8. Last toast does not close because timer is stuck

### Version

react-aria v3.38.1, react-stately v3.36.1

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

Windows 11

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox reproduction using react-aria v3.38.1 and react-stately v3.36.1, then trace the toast timer behavior when Framer Motion exit animation removes the bottom toast. Reproduce the eight listed steps in Chrome and confirm that the remaining toast closes normally after the timer resumes.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.