React-virtualized: Problem with AutoSizer in v9.21.1

[ashmigelski]

Hey

In my app I have tabs with virtualized lists on it. I use scrollTop property to restore scroll position when switching tabs. After update to 9.21.1 I faced strange bug (in 9.21.0 same code works fine)

What is the current behavior?

Steps to reproduce

1) scroll List1 on Tab 1
2) go to Tab 2
3) scroll List2 on Tab 2
4) back to Tab 1 (List with AutoSizer) -> BUG: blank list. List will be shown if scroll
5) back to Tab 2 (List without Autosizer) -> works as needed (restore previous scrollTop)

Code https://codesandbox.io/s/reactvirtualized9211-two-tabs-with-scrolltop-w5vpd

Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?

| | |
|-------------------|----------|
| Browser | Chrome 70 |
| OS | Debian |
| React | 16.8.6 |
| React DOM | 16.8.6 |
| react-virtualized | 9.21.1 |

[gsbelarus]

I have the same bug with Grid component. Forced to rollback to version 9.21.0 that works fine. If you set initial ScrollTo value greater than zero then part of the Grid will be drawn blank on first render.

[gsbelarus]

I think the problem is with this commit: https://github.com/bvaughn/react-virtualized/commit/32855b8abfc0980237970e148fc625edc78f7e01

[cquiroz]

I see this same issue as result of a first call from AutoSizer with width 0
I've fixed it by passing a
width = max(1, size.width)
to the table

[Kyle-Lowe]

@cquiroz where exactly are you getting size from? The only props available in the child function of autosizer are width and height. Additionally, I assume max is shorthand for Math.max. In which case I attempted to set the width property of the Table to Math.max(1, width) and am experiencing the same issue. I agree with @gsbelarus that this may be a side effect of the fix to grid in the most recent commit. Either way I am also experiencing the same thing that @ashmigelski is experiencing when the component is unmounted and mounted again while providing a scrollTo prop.

[Kyle-Lowe]

Has anyone had any additional luck with finding a version of react-virtualized where the scrollTop prop for Tables is actually reflected when using AutoSizer? I'm attempting to just rewrite the logic manually, but if there's a version where it is functioning I'd prefer to go down that path.

Thanks!

[cquiroz]

Actually what is working form is to check size.width/height. If it is 0 I render a dummy div, if more than zero then I render the Table and scrollTop works fine. Likely if you render with 0 the internal state gets messed up

[Kyle-Lowe]

So, you are using the latest 9.21.1 and prior to setting scrollTop on your table you are interrogating the size of what exactly? I don't think your solution pertains to the initial issue found by @ashmigelski. When interrogating my preserved scrollTop position for zero and only passing it if > 0 I am still seeing the issue @ashmigelski noted in the initial post where the scroll position is always defaulted to zero and we see empty space where rows that are not currently part of the rendered view should exist. Anytime the Table is unmounted and then mounted with a new scrollTop, this issue occurs.

@cquiroz, do you have a code sandbox containing a proposed resolution or have you created a pull request resolving the issue?

[Kyle-Lowe]

@ashmigelski, I have reverted back to version 9.20.0 in the project I'm currently working on and also updated your code sandbox to this version. This appears to have fixed the syncing issue between the AutoSizer and Table components. If you are looking for a temporary solution until the issue can be resolved going forward this may help you out.

[pierre-aurele-martin]

Hello, I confirm this issue ! Took me a while to understand that it was not my fault ;)

The "hack" I've found is instead of returning a width=0 from calcColumnWidth, I return 0.1 - in my context, it doesn't do a difference (except it works :)

[saisandeepvaddi]

Yes, I had the similar issue. Reverting to 9.19.1 fixed it.

[Z-HNAN]

try this

<Grid
    cellRenderer={(params) => {
        return this.cellRender(params);
    }}
     ......
 />