TanStack · piecyk · Mar 5, 2026 · Mar 5, 2026 · Mar 5, 2026 · Mar 5, 2026
diff --git a/.changeset/ninety-games-accept.md b/.changeset/ninety-games-accept.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/virtual-core': patch
+---
+
+fix(virtual-core): early return in \_measureElement for disconnected nodes
diff --git a/packages/react-virtual/e2e/app/index.html → ...irtual/e2e/app/measure-element/index.html b/packages/react-virtual/e2e/app/index.html → ...irtual/e2e/app/measure-element/index.html
@@ -5,6 +5,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/main.tsx"></script>
+    <script type="module" src="./main.tsx"></script>
   </body>
 </html>
diff --git a/packages/react-virtual/e2e/app/measure-element/main.tsx b/packages/react-virtual/e2e/app/measure-element/main.tsx
@@ -0,0 +1,114 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+interface Item {
+  id: string
+  label: string
+}
+
+const INITIAL_ITEMS: Array<Item> = [
+  { id: 'item-a', label: 'A' },
+  { id: 'item-b', label: 'B' },
+  { id: 'item-c', label: 'C' },
+]
+
+const App = () => {
+  const parentRef = React.useRef<HTMLDivElement>(null)
+  const [items, setItems] = React.useState(INITIAL_ITEMS)
+  const [expandedId, setExpandedId] = React.useState<string | null>(null)
+
+  const rowVirtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 36,
+    getItemKey: (index) => items[index].id,
+  })
+
+  const toggleExpand = (id: string) => {
+    setExpandedId((prev) => (prev === id ? null : id))
+  }
+
+  const deleteItem = (id: string) => {
+    setItems((prev) => prev.filter((item) => item.id !== id))
+    if (expandedId === id) {
+      setExpandedId(null)
+    }
+  }
+
+  return (
+    <div>
+      <div
+        ref={parentRef}
+        id="scroll-container"
+        style={{ height: 400, overflow: 'auto' }}
+      >
+        <div
+          style={{
+            height: rowVirtualizer.getTotalSize(),
+            position: 'relative',
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map((v) => {
+            const item = items[v.index]
+            const isExpanded = expandedId === item.id
+
+            return (
+              <div
+                key={item.id}
+                data-testid={item.id}
+                ref={rowVirtualizer.measureElement}
+                data-index={v.index}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  transform: `translateY(${v.start}px)`,
+                  width: '100%',
+                }}
+              >
+                <div
+                  style={{
+                    display: 'flex',
+                    gap: 8,
+                    alignItems: 'center',
+                    padding: 4,
+                  }}
+                >
+                  <span>Row {item.label}</span>
+                  <button
+                    data-testid={`expand-${item.id}`}
+                    onClick={() => toggleExpand(item.id)}
+                  >
+                    {isExpanded ? 'Collapse' : 'Expand'}
+                  </button>
+                  <button
+                    data-testid={`delete-${item.id}`}
+                    onClick={() => deleteItem(item.id)}
+                  >
+                    Delete
+                  </button>
+                </div>
+                {isExpanded && (
+                  <div
+                    data-testid={`content-${item.id}`}
+                    style={{
+                      height: 124,
+                      background: '#eee',
+                      padding: 8,
+                    }}
+                  >
+                    Expanded content for {item.label}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+      <div data-testid="total-size">{rowVirtualizer.getTotalSize()}</div>
+    </div>
+  )
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
diff --git a/packages/react-virtual/e2e/app/scroll/index.html b/packages/react-virtual/e2e/app/scroll/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/react-virtual/e2e/app/main.tsx → ...ges/react-virtual/e2e/app/scroll/main.tsx b/packages/react-virtual/e2e/app/main.tsx → ...ges/react-virtual/e2e/app/scroll/main.tsx
diff --git a/packages/react-virtual/e2e/app/test/measure-element.spec.ts b/packages/react-virtual/e2e/app/test/measure-element.spec.ts
@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test'
+
+test('positions items correctly after expand → collapse → delete → expand', async ({
+  page,
+}) => {
+  await page.goto('/measure-element/')
+
+  // All 3 items visible at ~36px each
+  await expect(page.locator('[data-testid="item-a"]')).toBeVisible()
+  await expect(page.locator('[data-testid="item-b"]')).toBeVisible()
+  await expect(page.locator('[data-testid="item-c"]')).toBeVisible()
+
+  // Step 1: Expand A → should grow to ~160px
+  await page.click('[data-testid="expand-item-a"]')
+  await expect(page.locator('[data-testid="content-item-a"]')).toBeVisible()
+
+  // Step 2: Collapse A → back to ~36px
+  await page.click('[data-testid="expand-item-a"]')
+  await expect(page.locator('[data-testid="content-item-a"]')).not.toBeVisible()
+
+  // Step 3: Delete A
+  await page.click('[data-testid="delete-item-a"]')
+  await expect(page.locator('[data-testid="item-a"]')).not.toBeVisible()
+
+  // Step 4: Expand B → should grow to ~160px
+  await page.click('[data-testid="expand-item-b"]')
+  await expect(page.locator('[data-testid="content-item-b"]')).toBeVisible()
+
+  // Wait for ResizeObserver to measure the expanded B
+  await page.waitForTimeout(200)
+
+  // C should be positioned after the expanded B, not overlapping it
+  const bBox = await page.locator('[data-testid="item-b"]').boundingBox()
+  const cBox = await page.locator('[data-testid="item-c"]').boundingBox()
+
+  expect(bBox).not.toBeNull()
+  expect(cBox).not.toBeNull()
+
+  // C's top should be at or after B's bottom (with no overlap)
+  const bBottom = bBox!.y + bBox!.height
+  expect(cBox!.y).toBeGreaterThanOrEqual(bBottom - 1) // 1px tolerance
+})
diff --git a/packages/react-virtual/e2e/app/test/scroll.spec.ts b/packages/react-virtual/e2e/app/test/scroll.spec.ts
@@ -19,7 +19,7 @@ const check = () => {
 }
 
 test('scrolls to index 1000', async ({ page }) => {
-  await page.goto('/')
+  await page.goto('/scroll/')
   await page.click('#scroll-to-1000')
 
   // Wait for scroll effect (including retries)

diff --git a/packages/react-virtual/e2e/app/vite.config.ts b/packages/react-virtual/e2e/app/vite.config.ts
@@ -5,6 +5,17 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   root: __dirname,
   plugins: [react()],
+  build: {
+    rollupOptions: {
+      input: {
+        scroll: path.resolve(__dirname, 'scroll/index.html'),
+        'measure-element': path.resolve(
+          __dirname,
+          'measure-element/index.html',
+        ),
+      },
+    },
+  },
   resolve: {
     alias: {
       '@tanstack/react-virtual': path.resolve(__dirname, '../../src/index'),

diff --git a/packages/react-virtual/playwright.config.ts b/packages/react-virtual/playwright.config.ts
@@ -10,7 +10,7 @@ export default defineConfig({
   },
   webServer: {
     command: `VITE_SERVER_PORT=${PORT} vite build --config e2e/app/vite.config.ts && VITE_SERVER_PORT=${PORT} vite preview --config e2e/app/vite.config.ts --port ${PORT}`,
-    url: baseURL,
+    url: `${baseURL}/scroll/`,
     reuseExistingServer: !process.env.CI,
     stdout: 'pipe',
   },

diff --git a/packages/virtual-core/src/index.ts b/packages/virtual-core/src/index.ts
@@ -863,6 +863,11 @@ export class Virtualizer<
     node: TItemElement,
     entry: ResizeObserverEntry | undefined,
   ) => {
+    if (!node.isConnected) {
+      this.observer.unobserve(node)
+      return
+    }
+
     const index = this.indexFromElement(node)
     const item = this.measurementsCache[index]
     if (!item) {
@@ -879,9 +884,7 @@ export class Virtualizer<
       this.elementsCache.set(key, node)
     }
 
-    if (node.isConnected) {
-      this.resizeItem(index, this.options.measureElement(node, entry, this))
-    }
+    this.resizeItem(index, this.options.measureElement(node, entry, this))
   }
 
   resizeItem = (index: number, size: number) => {