TanStack
Extra white space before and after items in the list when using ```useVirtualizer``` in React
Describe the bug
We have a Dropdown Component, which uses the following stack:
- "@tanstack/react-virtual": "3.0.0-beta.54"
- "@headlessui/react": "1.7.16"
Particularly, we are using Combobox and virtualiser since we have a large list of items. We are experiencing this following issue:
When you move away with your mouse from the browser and come back to the dropdown and open it. You can observe such white spaces sometimes before the items, sometimes after the items, when you are scrolling. (See images below)
It is more consistent in the deployed version of the app. It was hard to reproduce in the local running version of our app. Luckily, it is more consistent in the codesandbox I provided.
Your minimal, reproducible example
https://codesandbox.io/p/sandbox/combobox-react-virtual-forked-n46x68?file=%2Fsrc%2FCombobox.tsx%3A6%2C10-6%2C24
Steps to reproduce
- Move away from the browser
- Come back to the dropdown and click the input
- Scroll up and down.
- Try to repeat the steps above, it is not consistent :( but can happen very frequently
Expected behavior
As a user, I am expecting not to see before the first item and after the last item, and it would not scrollable before the first item and after the last item.
How often does this bug happen?
Often
Screenshots or Videos
Platform
Chrome
tanstack-virtual version
v3.0.0-beta.54
TypeScript version
v4.9.3
Additional context
I hope I provided all the necessary information. Please feel free to let me know if something is missing. I will be looking forward to your response. Thanks a lot in advance!
Terms & Code of Conduct
- [X] I agree to follow this project's Code of Conduct
- [X] 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.
