adobe / adobe/react-spectrum

React ViewTransition used within RAC collection item cause error

Open
#8,989 5 comments 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

Hello!

React just promoted [`ViewTransition`](https://react.dev/reference/react/ViewTransition#) to canary so I've decided to give them a try. One of their use case straight from documentation is animating list items being reordered. You can do this by wrapping your list element with `ViewTransition` and updating the list in transition. Under the hood, when update is performed React have some heuristics around deciding which element should be animated, this is described a bit in the [original implementation PR](https://github.com/facebook/react/pull/31975). This uses e.g. `getBoundingClientRect` to decide whether element's size changed.

This causes issues when using RAC collection item, because they're rendered into the fake DOM first to collect info about collection items, as [described here](https://github.com/adobe/react-spectrum/blob/main/rfcs/2023-react-aria-components.md#collections). However, this fake DOM doesn't implement `getBoundingClientRect` so this causes error:

Image

You can see the `instance` here being the custom fake DOM node implementation from React Aria:

Image

I think that's a similar thing causing issues as one here - https://github.com/facebook/react/pull/33177 But `getBoundingClientRect` is obviously widely available. Also, I think there're additional methods used later in the code, that React expects to work here, e.g. `getComputedStyle` - I'm not sure how it'd work with these custom nodes, I assume it wouldn't.

### 🤔 Expected Behavior?

React's `ViewTransition` works correctly with collection items, not causing any errors when animating and view transition properly invoked

### 😯 Current Behavior

Collection items cause error when React tries to decide whether it should be animated or not, when making render pass in the fake DOM.

### 💁 Possible Solution

Adding additional methods to the fake DOM? I'm not sure whether that'd be enough.

### 🔦 Context

As mentioned - trying out Canary features and whether they work correctly in one of my apps. `ViewTransition` is really cool addition so I wanted to use it instead other ways of implementing FLIP animations.

### 🖥️ Steps to Reproduce

1. Use React canary version
2. Render list of items with some RAC collection, e.g. ListBox
3. Wrap each `ListBoxItem` with `ViewTransition`
4. Trigger `ViewTransition` by reordering items inside of transition
5. Observe the error

I implemented really small reproduction, I've also added standard list so you can observe how it should behave. Just need to comment out the RAC list for a moment so error don't crash the render 😄

https://github.com/pawelblaszczyk5/rac-collections-view-transition

https://github.com/user-attachments/assets/e012028d-36de-48ac-bc50-d2d5833ae1c3

### Version

RAC - 1.13.0

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

Firefox, Safari, Microsoft Edge, Chrome, Other

### If other, please specify.

Just everywhere 😄

### What operating system are you using?

MacOS

### 🧢 Your Company/Team

N/A

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked reproduction and its ListBox/ListBoxItem example, then read the React Aria Components collections RFC and inspect the fake DOM node behavior described there. Compare the collection-item render pass with the standard list case; done means React ViewTransition can reorder collection items without errors and the transition is invoked.

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
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.