Repository navigation
Dynamic item size uses estimateSize fallback when inside portal with dynamically created element #596
Description
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
- Press "Open modal"
=> First items are squished - Change
createPortalcontainer todocument.body - Reload and press "Open modal"
=> First items are not squished
Lazy: Change default state in the options from _options to null
- 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.
Activity
HRworksVid commentedon Oct 4, 2023
@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 + 1ascountfor lazy loading. I used this behavior for showing a loading animation when initially loading elements (initiallyallRows.lengthis0), 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 thegetTotalSize()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 commentedon Oct 4, 2023
@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 commentedon Oct 6, 2023
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?