Detached DOM nodes are retained when transition of multiple values is cancelled
- 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
I noticed while while taking memory snapshots that some detached nodes where retained by runAfterTransition.ts.
### 🤔 Expected Behavior?
[transitionsByElement](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/runAfterTransition.ts#L19) should not retain any reference to nodes that have been removed from the DOM.
### 😯 Current Behavior
When a node with multiple transitions in progress is removed from the DOM a reference to it is still kept in [transitionsByElement](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/runAfterTransition.ts#L19).
I think the problem is [here](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/runAfterTransition.ts#L48). Only the first transitioncancel event is listened for and since there are still tracked transitions on the node it is [not removed](https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/utils/src/runAfterTransition.ts#L67).
### 💁 Possible Solution
Potentially don't setup the `transitioncancel` event listener with `once: true`
### 🔦 Context
_No response_
### 🖥️ Steps to Reproduce
I'm not sure how to replicate this in a sandbox.
### Version
3.35.0
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
_No response_
### What operating system are you using?
OSX
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Research direction
Start by reading packages/@react-aria/utils/src/runAfterTransition.ts, especially the transitionsByElement logic around lines 19, 48, and 67. Investigate cancellation when an element has multiple transitions and is removed from the DOM, using Chrome memory snapshots if needed. Done means cancelled transitions no longer retain detached DOM nodes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100