Resize glitch using Autoresizer after upgrading to 8.8.0

[ingro]

Hello, first of all thanks for this great library!

I'm here to report a resize glitch using Autoresizer after updating to the latest version (8.8.0).

I've created a plunker to show the glitch: https://plnkr.co/edit/4ykww2k5yFWkbpUm0Aje

To reproduce, run the plunker in a separate window (which should not be maximized), enlarge it a bit, then scroll down the table for some rows and then scroll it to the top: you should see that the rows which enter the viewport have the correct size, while the old ones keep their size pre-resize.

If you change the plunker's index.html to use react-virtualized@8.7.1 you could see that the problem wasn't there, the rows update their size as the window is enlarged, so no glitch there.

[edulan]

Hi @ingro

I'm having the same issue with Grid component (Table uses it underneath). AFAIK the problem is related with the recent addition of styleCache #506, so when AutoSizer is involved cached dimensions are not cleared. They're cleared only when scrolling, so if you try to scroll the table after resizing you'll see that eventually all cells get the right dimensions.

There's another option to force styleCache clearing which is using recomputeGridSize method of Grid component (this is what I'm currently using as a workaround). For Table component you may use recomputeRowHeights which proxies to Grid one. You should call this method whenever resize occurs, for that you may use onResize callback of AutoSizer. Let me know if that works for you 😉

Btw, @bvaughn what do you think about providing a method for manually clearing styleCache? Does it make sense?

[ingro]

Whoa thanks for the insights @edulan, I will try your workaround tomorrow!

…

On 14 Dec 2016 16:44, "Eduardo Lanchares" ***@***.***> wrote: Hi @ingro <https://github.com/ingro> I'm having the same issue with Grid component (Table uses it underneath). AFAIK the problem is related with the recent addition of styleCache #506 <#506>, so when AutoSizer is involved cached dimensions are not cleared. They're cleared only when scrolling, so if you try to scroll the table after resizing you'll see that eventually all cells get the right dimensions. There's another option to force styleCache clearing which is using recomputeGridSize method of Grid component (this is what I'm currently using as a workaround). For Table component you may use recomputeRowHeights which proxies to Grid one. You should call this method whenever resize occurs, for that you may use onResize callback of AutoSizer. Let me know if that works for you 😉 Btw, @bvaughn <https://github.com/bvaughn> what do you think about providing a method for manually clearing styleCache? Does it make sense? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#509 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA1rR8uVCPIYMpuICd0MI7dT9kWAbF8Zks5rIA73gaJpZM4LMyyi> .

[bvaughn]

Sorry for the regression @ingro. And thanks for chiming in @edulan!

Ideally we should clear the cache any time columnWidth or rowHeight changes, although that's a little tricky due to the fact that those props can be functions and users may inline them (so we'd get false positives).

A method to manually clear the cache would also work but I'd really prefer for users not to have to think about the cache at all.

Maybe List and Table should trigger this reset any time their widths change, since a vanilla Grid's cells wouldn't (in theory) be impacted by width.

Unfortunately I can't do anything about this for the next several hours because I'm at work. If someone else would like to take a stab at it, that'd be great. Otherwise I'll get to it when I can.

[bvaughn]

Maybe a better solution would be to use a key comprised of the style information (as was initially proposed in PR #483). I wasn't a fan of this because it would continue to grow but...perhaps we could use an LRU cache to address that aspect. I'm not sure if it would be as performant as the current implementation, but it would simplify edge cases like this.

[bvaughn]

Fixed in version 8.8.1

Compare the previous version:
https://rawgit.com/bvaughn/react-virtualized/master/playground/render-counters.html?source=8.8.0

To the new version:
https://rawgit.com/bvaughn/react-virtualized/master/playground/render-counters.html?source=8.8.1

Resizing the window will increment the render counters in the new version. Scrolling slowly should not increment them (in either version).

Forking your Plnkr to use 8.8.1 shows the correct behavior as well:
https://plnkr.co/edit/VAJ83L0j8XTBsV4jeydi?p=preview

Thank you for the quick bug report.

[edulan]

Thanks for the fix @bvaughn 👍

[ingro]

Yep I can confirm that it's working now, thanks for the fast fix @bvaughn !

[bvaughn]

Great! Thanks for confirming

…

On Dec 15, 2016 12:44 AM, "Emanuele Ingrosso" ***@***.***> wrote: Yep I can confirm that it's working now, thanks for the fast fix @bvaughn <https://github.com/bvaughn> ! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#509 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABznRzfckg_oDsRm2yqZcxbY3_gqaJrks5rIP3QgaJpZM4LMyyi> .