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

[adlai-arnold]

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.

[adlai-arnold]

Given that the issue starts in beta release 36, it must be somewhere in this diff: v3.0.0-beta.35...v3.0.0-beta.36

[reidark]

Any solutions/workaround on that?

I have a virtual list of checkboxes and every time the user select some item that is not 100% on the "viewport", it scrolls upwards, causing a confusion.

This happens because of the focus state? I know if I navigate via keyboard the list will scroll automatically based on the element focused.

EDIT:
I've changed my structure from checkboxes to div with role="option", something similar like radix-ui does and now it's working fine.
I assume checkbox trigger focus moving the virtual list to the viewport. TBH I don't know how to resolve this case, maybe preventing the change event to trigger focus.

[piecyk]

No it is happening because of our auto adjustment scroll position logic, basic if user jumps to bottom of the list an start scrolling up, in dynamic case the sizes can change, that will change the height of the list making the scroll to jump

https://github.com/TanStack/virtual/blob/beta/packages/virtual-core/src/index.ts#L656-L665

with this we are trying to limit that behaviour, best would to be to add it only when scrolling backward and maybe to allow to opt out from it.

[kamuiiiii]

I've encountered the same issue. Any updates on this?

[piecyk]

I've encountered the same issue. Any updates on this?

Yeah, now it's possible to control the adjustment with shouldAdjustScrollPositionOnItemSizeChange, one option can be

const expand = (index: number) => {
  virtualizer.shouldAdjustScrollPositionOnItemSizeChange = () => false
  setExpanded(index)
  // move to next tick after resize observable will update sizes
  setTimeout(() => {
    virtualizer.shouldAdjustScrollPositionOnItemSizeChange = undefined
  }, 0)
}