[BUG] VirtuosoGrid, Chrome: Negative index is passed to itemContent in initial rendering

[mrkev]

Describe the bug

First and furthermost, thanks @petyosi for your work in react-virtuoso. I previously used react-virtualized, and am enjoying using virtuoso instead. Let me know if I can be of help in figuring out a fix for this issue— I want to be as helpful as possible.

Now onto the bug: I see an index of -1 when using VirtuosoGrid. This is unexpected, and is accompanied by an empty grid and the following warning:

Warning: `Infinity` is an invalid value for the `paddingTop` css style property.

This seems to be the same bug reported here https://github.com/petyosi/react-virtuoso/issues/290. This previous issue doesn't really seem to have a resolution, but concluded the bug was only reproducible on Firefox. I'm using Chrome.

Reproduction

CodeSandbox: https://codesandbox.io/s/wizardly-chihiro-spl3n?file=/src/App.tsx

To Reproduce

1. Open the code-sandbox above
2. Expand the console
3. Notice the console logs -1:

Interestingly, the warning about an infinite paddingTop doesn't seem to be consistently thrown. I suspect is has to do with re-layout (from re-sizing, for example) but I'm not entirely sure.

Expected behavior

Indexing starts at 0.

Screenshots

Added in the To Reproduce section

Desktop (please complete the following information):

• OS: macOS Monterey 12.0.1 (21A559)
• Browser: Chrome 96.0.4664.93 (Official Build) (x86_64)

[petyosi]

@mrkev the problem is because that the grid outer element has zero height. Solving that won't get you much further though, because the grid does not support masonry-like layouts. It works only for same-sized elements.

[mrkev]

Gotcha, thanks for the quick response and the heads up @petyosi— I'll look into either using css grid or grouping elements into rows to simulate a grid with a list.

[0xCheeseKnight]

I fixed my issue by using 0 when index is -1. Considering how this "fix" works I don't see why it should ever return -1.