React-virtualized: Issue with Collection scrolling when data is loaded async

[garylesueur]

https://plnkr.co/edit/81aoXFH8mkZhoxaKib2o

So first off, I've setup a plunker as requested. This is a snippet of what we are/were planning to use in production.

As it stands, the grid works as desired. When we started using real data, we came across a big problem.

To see the issue, on script.jsx - line 45, if you comment out the initial "this.populate()" then you can see the entire grid / page scrolling rather than just the items as desired.

At the moment I am cheating by seeding the grid with initial data but I'd like to not do this.

Thanks.

[bvaughn]

Thank you for the Plnkr and the detailed bug description. Looks like this bug can be reproduced on the official site as well: https://bvaughn.github.io/react-virtualized/#/components/Collection

1. Open page
2. Change cell count to 0
3. Change cell count back to 1000

The problem seems to be that the overflow: auto style is not present as of step 3. But logging the style object shows that I'm specifying that style... I'm a bit confused.

[bvaughn]

Interesting... these lines are forcefully turning off scrollbars if the content is not tall or wide enough to require scrolling.

It seems that once I've set a value for overflowX: hidden then subsequently setting a style with overflow: auto (eg no overflowX property at all) doesn't stick.

This seems like a bug outside of react-virtualized.

I can fix it in react-virtualized though by making CollectionView styles do what Grid does.

[bvaughn]

Fixed with b5b8e29. Will go out in a release sometime in the next couple of days.

In the meanwhile you should be able to work around this on your end by passing a style prop like:

<Collection
  {...props}
  style={{
    overflowX: 'auto',
    overflowY: 'auto'
  }}
/>

[bvaughn]

I've captured this bug with a small Plnkr and reported it here: facebook/react/issues/8689

[bvaughn]

The underlying bug actually impacts all shorthand CSS properties. Turns out that shorthand properties aren't [fully?] supported by React due to how the style updates are currently done. I was unaware of this.

Either way, it's been fixed in react-virtualized for now and the fix will roll out with the next release.

[garylesueur]

Superb, thanks for that. Just been reading up and I don't feel so bad about not solving it myself now 👍

Build failing btw

[bvaughn]

Build is failing in CI because PhantomJS is crashing in the middle of tests:

I haven't had the time to look into it yet. It doesn't crash for me locally. (All tests pass.) If you have the time to look into it, I'd love a hand. Otherwise I'll get to it eventually.