React ViewTransition used within RAC collection item cause error
- 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:
You can see the `instance` here being the custom fake DOM node implementation from React Aria:
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
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