virtualizer.getVirtualItems() return zero items for vanilla js project

[Dugnist]

Describe the bug

I need to implement virtual list in vanilla js.
I used this approach:

<script type="module" defer>
  import { Virtualizer } from 'https://cdn.jsdelivr.net/npm/@tanstack/[email protected]/+esm';
  // other code...
  // Initialize the virtualizer
  const virtualizer = new Virtualizer({
    debug: true,
    count: 10000, // The number of items in the list
    getScrollElement: () => container,
    estimateSize: () => 50, // The estimated size of each item
    overscan: 5, // How many items to render outside of the viewport
  });
  // other code...
  const items = virtualizer.getVirtualItems();
  // items.length always === 0
</script>

No matter what I do, the array of items is always empty. But virtualizer.measurementsCache.length === 10000.

Your minimal, reproducible example

https://codepen.io/Dugnist/pen/LYveoXQ

Steps to reproduce

<script type="module" defer>
  import { Virtualizer } from 'https://cdn.jsdelivr.net/npm/@tanstack/[email protected]/+esm';
</script>

const virtualizer = new Virtualizer({
    debug: true,
    count: 10000, // The number of items in the list
    getScrollElement: () => container,
    estimateSize: () => 50, // The estimated size of each item
    overscan: 5, // How many items to render outside of the viewport
  });

3

const items = virtualizer.getVirtualItems(); // -> []

Expected behavior

const items = virtualizer.getVirtualItems() should return array with more than zero items

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

codepen

tanstack-virtual version

[email protected]

TypeScript version

vanilla js

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.

[andrody]

same problem on safari

[piecyk]

@Dugnist you need to call virtualizer._willUpdate() that will register scroll events and rect size detection.

[vincehi]

I'm using solid, I had the same problem when I tried to update the package, so I went back to the one I was using until then, 3.0.0-beta.6, and it works perfectly. Waiting to find out why.

[lucjdo]

having same problem on a nextJs project with latest version (3.5.1)

[piecyk]

having same problem on a nextJs project with latest version (3.5.1)

@lucjdo can you create simple stackblitz example?

[lucjdo]

having same problem on a nextJs project with latest version (3.5.1)

@lucjdo can you create simple stackblitz example?

@piecyk sorry my bad, I was trying to use it with another library and the parent ref wasn't accurate, that was causing getVirtualItems() to return a empty array

[kapilpipaliya]

I used setTimeout(() => setParentRef(el), 100) to set parentRef to solve the issue

[rockmandash]

@Dugnist you need to call virtualizer._willUpdate() that will register scroll events and rect size detection.

_willUpdate the name itself is confusing for folks who want to directly use the core api without any framework.