Dynamic item size uses estimateSize fallback when inside portal with dynamically created element

[HRworksVid]

Describe the bug

I don't know if this is a bug that can be fixed on your side but I experienced a strange behavior when rendering my virtualized list inside a portal. This occurs when I create an anchor for the portal inside useEffect and use the node created with document.createElement. If I use document.body or something reachable with document.getElementById instead, it works.

Context: I am using a ComboBox and render the list inside a dropdown or inside a modal on mobile devices. I did not notice it at first because in my development workflow the items usually get fetched after initially rendering the list. These items get cached based on the query so they don't have to fetched again. You can simulate this behavior by changing the default value in the example.

PS: Thanks for creating and maintaining this library!

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/vigilant-kirch-v8q98r

Steps to reproduce

1. Press "Open modal"
   => First items are squished
2. Change createPortal container to document.body
3. Reload and press "Open modal"
   => First items are not squished

Lazy: Change default state in the options from _options to null

1. Press "Open modal"
   => First items are not squished

Expected behavior

Items are not squished

How often does this bug happen?

Every time

Screenshots or Videos

Platform

OS: Windows 11
Browser: Google Chrome 117.0.5938.132 64-Bit
React: 17.0.2 and 18.2.0

tanstack-virtual version

3.0.0-beta.61

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.

[HRworksVid]

@piecyk Works, thanks. One question: It seems like I have abused the old functionality for my initial lazy loading to work and I want to know if this is intentional.

The infinite scroll example suggests setting allRows.length + 1 as count for lazy loading. I used this behavior for showing a loading animation when initially loading elements (initially allRows.length is 0), knowing that the last / only item in the list is the 'loading' item. Now that no items are returned, I cannot identify a loading item anymore, also the getTotalSize() returns 0.

I got a few workarounds for this to work for me, might as well move to TanStack Query but I wanted to make sure this current behavior is intentional. I can provide a Codesandbox if necessary

[piecyk]

@HRworksVid i would say that it's expected, as we should not return rows when there is no content, the above example is working fine for me. I think you are trying to render conditionally and want to trigger the call before the scroll element is mounted?

Overall my current approach regarding infinite scroll is using IntersectionObserver to call next request, https://codesandbox.io/p/sandbox/focused-http-d2kyky as imho it's kinda simpler.

[HRworksVid]

Hey @piecyk, that's an interesting approach. I used the one from the infinite scroll example, here you can see it working with beta61: https://codesandbox.io/p/sandbox/rough-dawn-p3tk7g

Would it be better to use this one or the other? Might as well update the example in the docs maybe?