adobe / adobe/react-spectrum

Detached DOM nodes are retained when transition of multiple values is cancelled

Open
#7,326 3 comments 1 reaction 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

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.