fix(react-virtual): size direct DOM container before scroll adjustments by tigerBeA · Pull Request #1265 · TanStack/virtual · GitHub
Skip to content

fix(react-virtual): size direct DOM container before scroll adjustments - #1265

Closed
tigerBeA wants to merge 3 commits into
TanStack:mainfrom
tigerBeA:lisw/fix-clamped-resize-adjustment
Closed

tigerBeA wants to merge 3 commits into
TanStack:mainfrom
tigerBeA:lisw/fix-clamped-resize-adjustment

Conversation

@tigerBeA

@tigerBeA tigerBeA commented Sep 7, 2026 •

Copy link
Copy Markdown
Contributor

🎯 Changes

Fixes #1266.

Live reproduction · Standalone source

With anchorTo: 'end' and directDomUpdates, growing an earlier message can leave the viewport above the bottom when the last message keeps its size. resizeItem applies its scroll adjustment before notifying the React adapter, so the browser clamps the write against the old sizer height. The internal offset advances, but the actual DOM position remains behind. In the regression, growing the previous message by 24px leaves a persistent 24px gap.

Apply the adapter's existing, size-guarded applyContainerSize before delegating to scrollToFn. The browser then sees the updated scroll range when applying the adjustment. This covers the resize path in direct DOM mode using the same ordering principle as #1237; related to #1209. The change is scoped to the React adapter's direct DOM mode.

A separate, statically configured chat-resize E2E fixture uses directDomUpdates with useFlushSync: false; the original chat fixture and its default-mode coverage are preserved. The regression grows the previous message while keeping the last message at a fixed viewport height, then checks the real scrollHeight and scrollTop. It uses the native ResizeObserver and browser scrolling, with native scroll anchoring disabled so it cannot mask a missing virtualizer adjustment.

Validation (Node 24.8.0 from .nvmrc, pnpm 11.9.0 from packageManager):

  • With only the SDK fix removed, the final /chat-resize/ regression fails with an actual bottom gap of 24px. Restoring the fix makes it pass.
  • NX_NO_CLOUD=true NX_DAEMON=false CI=1 pnpm run test:pr --parallel=2 --skip-nx-cache passes, including all 34 React browser tests, 7 React library tests, type checks, lint, builds, and package validation. Nx caching was disabled for this run.
  • Prettier checks pass for all changed files.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a patch changeset for @tanstack/react-virtual.
  • This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

  • Bug Fixes

    • Fixed end-anchored virtualized lists so they remain pinned to the bottom when an earlier item increases in height.
    • Updated scroll adjustments to use the latest container size, preventing the browser from limiting the intended scroll position.
    • Improved chat-style scrolling so users remain at the latest message after earlier content expands.
  • Tests

    • Added end-to-end coverage for chat-style lists where a previous message grows while scrolled to the bottom.

@coderabbitai

coderabbitai Bot commented Sep 7, 2026 •

Copy link
Copy Markdown

@tigerBeA
tigerBeA marked this pull request as draft September 7, 2026 08:39
@tigerBeA
tigerBeA marked this pull request as ready for review September 7, 2026 08:47
@piecyk

piecyk commented Sep 7, 2026

Copy link
Copy Markdown
Collaborator

@piecyk piecyk closed this Sep 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[React] directDomUpdates loses end anchoring when an earlier row grows

2 participants