TanStack / TanStack/virtual

Expanding an item that is partially obscured by the top of the scrolling window causes the item to move upwards

Open
#562 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
7.1k
Forks
466
Avg merge
2d 31m
Merged PRs (30d)
13

Description

Describe the bug

Expanding an item should never move the top of the item--it should always expand downwards. However, if the scroll window occludes the top of the item, it will instead move upwards when expanded.

This issue does not occur in 3.0.0-beta.35 and earlier.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/zen-blackburn-tnrzfr

Steps to reproduce
  1. Scroll down such that an item is partially occluded by the top of the scroll window
  2. Click on the occluded item to expand it
  3. Note that the top of the item jumps up and out of view
  4. Change the @tanstack/react-virtual version number to 3.0.0-beta.35 and run npm i && npm run dev, then redo steps 1-3 and see that the item does not move
Expected behavior

As a user, I expect that expanding an item will not cause it to move.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

MacOS 13.4.1 (22F82), Chrome Version 114.0.5735.198 (Official Build) (arm64)

tanstack-virtual version

3.0.0-beta.54

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct
  • I agree to follow this project's Code of Conduct
  • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox reproduction using @tanstack/react-virtual 3.0.0-beta.54, then compare its behavior with 3.0.0-beta.35. Trace the virtualized list's expansion and scroll handling; done means an item partially hidden at the top expands downward without jumping or moving out of view.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.