Virtualizer: Items overlap when dynamic content expands heights

[mykhailo-ivankiv]

Provide a general summary of the issue here

In react-aria-components  Virtualizer with  ListLayout and estimatedRowHeight for variable heights, expanding item content (e.g., accordion, image load) causes overlap with subsequent items. Items do not shift properly despite measurement.

Video:
https://github.com/user-attachments/assets/6c078ed4-5a75-4b74-a192-72351f463244

Minimal reproducible example:
https://stackblitz.com/edit/vitejs-vite-j4eu8ny2?file=src%2Findex.css,vite.config.ts,src%2Fmain.tsx,src%2FExample.tsx&terminal=dev

🤔 Expected Behavior?

Virtualizer detects height change (via ResizeObserver or layout), remeasures, and repositions items without overlap, similar to react-window. (https://react-window.vercel.app/list/dynamic-row-height)

😯 Current Behavior

Expanding item content (e.g., accordion, image load) causes overlap with subsequent items

💁 Possible Solution

Option 1: Per-Item ResizeObserver
• Attach  ResizeObserver to each rendered  ListBoxItem  (visible items only).
• On resize, invalidate layout measurements and trigger Virtualizer re-compute
• Pros: Precise, automatic for content changes (images, text expand).
• Cons: Observer overhead (but low, ~10-20 visible items); ensure cleanup on unmount.

Option 2: Static “View Frame” Rendering
• Replace absolute positioning with a single scrollable “viewport” container holding statically positioned items (no transforms).
• Use  IntersectionObserver on viewport sections/frames to pre-render batches.
• Pros: Natural CSS flow, no overlap; easier dynamic heights.
• Cons: Less efficient for ultra-large lists (renders more); complex frame management

🔦 Context

No response

🖥️ Steps to Reproduce

Please follow the video and the minimal reproducible example

Version

1.14.0

What browsers are you seeing the problem on?

Firefox, Chrome

If other, please specify.

Probably in any browse

What operating system are you using?

Mac OS 26.2

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[mykhailo-ivankiv]

I had attempted to use the key prop; it resolves some issues, but it remains buggy and does not solve the problem.

[nwidynski]

react-spectrum/packages/@react-stately/virtualizer/src/LayoutInfo.ts

Lines 48 to 54 in cfb6200

	/**
	* Whether the size is estimated. `false` by default.
	* Items with estimated sizes will be measured the first time they are added to the DOM.
	* The estimated size is used to calculate the size and position of the scrollbar.
	* @default false
	*/
	estimatedSize: boolean;

react-spectrum/packages/@react-aria/virtualizer/src/useVirtualizerItem.ts

Lines 39 to 43 in cfb6200

	useLayoutEffect(() => {
	if (layoutInfo?.estimatedSize) {
	updateSize();
	}
	});

Virtualized items are only measured the first time they are added to the DOM. If you want to have them re-measured to trigger a layout update, you need to reset the estimatedSize property on the layout info of the affected node or otherwise call updateItemSize with the updated size.