Brief Scrollbar Flash Due to Incorrect `getTotalSize()` on Dropdown Mount
We've integrated TanStack Virtual into our custom Select component in React to optimize rendering performance. However, we're encountering a visual glitch: upon opening the dropdown, a scrollbar appears briefly (for approximately one frame), even though the total height should not require scrolling.
The issue appears to stem from the virtualizer.getTotalSize() function, which returns a height roughly 4x larger than expected. We're using an estimated item size of 40px, which matches the actual rendered height of each item, so it's unclear why the total size is incorrect.
Component structure:
- Selectbox: parent component
- SelectboxDropdown: dropdown panel (mounted only when visible)
We've experimented with placing the virtualizer in both components:
- When used in the parent (Selectbox), the glitch with the brief scrollbar appears (as shown in the attached video).
- When used in the dropdown (SelectboxDropdown), the options are not rendered initially when the dropdown opens. They only appear after a subsequent re-render, which seems unintended.
We suspect this may relate to the fact that the dropdown is only mounted when visible, which may interfere with layout calculations during the first render.
I'm primarily looking for debugging strategies or ideas to narrow down the root cause. Due to context constraints, I'm unsure how much code I can share, but happy to provide snippets if needed.
7 Replies
fascinating-indigoOP•4mo ago
@piecyk sorry to ping you, I just saw you as a maintainer answering questions and this problem is a huge roadblock for me right now, but maybe it is a simple problem and you might have a quick idea, sorry again 🙊
fair-rose•4mo ago
Hmm, hard to say without seeing more, it might be related to the scroll element itself. Could you share a bit of how you're building the Select? For example, if you're passing the scroll element down the tree, make sure you're using state instead of ref to store it.
fascinating-indigoOP•4mo ago
Thanks for your answer! I'm not sure what you mean though 😅 , do you mean like this?
fascinating-indigoOP•4mo ago
before I used dropdownRef (which is now unused in this screenshot)
changing it likes this changed nothing about the behaviour
fascinating-indigoOP•4mo ago
Here is the parent component:
I also realized my original post has a mistake. The current behaviour is the behaviour when the virtualizer is in the child element, which is only mounted when visible. When the virtualizer is in the parent element and passed down, then no virtual items are rendered on initial mount, but only after a rerender.
fair-rose•4mo ago
hmm hard to say floating has an example of virtual select, maybe this can help you https://codesandbox.io/p/sandbox/l10rjs?file=%2Fsrc%2FApp.tsx
fair-rose•4mo ago
the link is from https://floating-ui.com/docs/react-examples
React Examples | Floating UI
A JavaScript library to position floating elements and create interactions for them.