React-virtualized: Collection autoHeight with WindowScroller and AutoSizer

[djeeg]

Hi Brian, epic project you have here!

I have been using <WindowScroller><AutoSizer><VirtualScroll> for a while.
Then saw <Collection>, and thought I would take it for a spin.
I couldn't see any docs saying that <WindowScroller><AutoSizer><Collection> wasnt possible.

Copying my code for <VirtualScroll>, I get this far:

    <WindowScroller>
        {({ height, isScrolling, scrollTop }) => (
            <AutoSizer disableHeight>
                {({ width }) => (
                    <Collection
                        cellCount={list.length}
                        cellRenderer={this._cellRenderer}
                        cellSizeAndPositionGetter={this._cellSizeAndPositionGetter}
                        horizontalOverscanSize={0}
                        verticalOverscanSize={0}
                        className={{ backgroundColor: '#fff'}}
                        scrollTop={scrollTop}
                        autoHeight
                        height={height}
                        width={width}
                    />
                )}
            </AutoSizer>
        )}
    </WindowScroller>

This is very close to what I want, except I get double scroll bars, one in the Collection, one in the browser

I think the reason is the autoHeight property on the <Grid> does not exist on the <Collection>
https://github.com/bvaughn/react-virtualized/blob/f00e1aed09c63cf78504a694b1647cebee1cd68d/source/Grid/Grid.js#L47

Doing a bit of browser HTML hacking, I can change

<div tabindex="0" class="Collection backgroundColor" role="grid" style="width: 1211px; height: 812px;" aria-label="grid" data-reactid="61">
</div>

To be, similar to the <VirtualScroll> output

<div tabindex="0" class="Collection backgroundColor" role="grid" style="width: 1211px; height: auto;" aria-label="grid" data-reactid="61">
</div>

Then <WindowScroller><AutoSizer><Collection> seems to work

I am just not close enough to the internals to know if I am missing something here, are there other issues that could crop up (like how InfiniteLoader is not supported with Collection)?

[bvaughn]

Hey @djeeg! Thank you for the kind words. I'm glad you're finding the library useful. 😄

You are correct that WindowScroller and Collection should work together. It's just not a popular combination I suppose and so the issue you've reported has not come up. (I've never personally used Collection outside of the demo site so I haven't spent as much time improving it as Grid.) Adding support for an autoHeight style property should fix things. 😁

Components like InfiniteLoader and CellMeasurer don't work with Collection because its data is non-linear but there's no reason WindowScroller shouldn't work (at least not that I know of).

[bvaughn]

autoHeight support has been added to Collection with release 7.24.0. Enjoy!

[djeeg]

Thanks @bvaughn , the update works perfectly. Awesome turn around time too!