Blank table when resizing columns

[comfroels]

Environment

• Package version(s): 3.8.3 (table)
• Browser and OS versions: Chrome 79.0.3945.117

If possible, link to a minimal repro (fork this code sandbox): You can repro on one of your examples: https://blueprintjs.com/docs/#table/features.freezing

Steps to reproduce

1. Resize any of the columns in the above example

Actual behavior

Table goes white

Expected behavior

Table renders cell data

Possible solution

Not quite sure why this is happening yet, still trying to dig. Other examples on your site are rendering correctly after the resize, so I'll have to try and figure out what's different

[adidahiya]

I'm not able to repro this in Chrome 79.0.3945.130 or Firefox 72.0.2 on macOS Mojave... do you have a screenshot or gif/video of the problem?

[waltonseymour]

I believe I'm seeing the same issue on Chrome 81.0.4044.138. It seems to be triggered by resizing columns and can be recovered by scrolling.

[strickland84]

I was able to replicate this issue on our project in both Chrome and Firefox so I don't think it's browser specific. I have tried adjusting the Table props to see if I could determine a trigger for this but I could not. As mentioned above it occurs when re-sizing the columns and can be reverted by scrolling.

[strickland84]

Also, as per my example and the one from @waltonseymour I notice that the first 4 columns remain rendered. Perhaps this is coincidence. 🤷

[ae0n]

I have the same issue with resizing. I'm able to repeat this bug in chrome 83.0.4103 and safari 13.1.1. Also only 4 columns are visible after resize and others are gone until I scroll the page.

[adidahiya]

It sounds like this is connected to all the other lifecycle bugs in @blueprintjs/table 3.8.x. For now I would recommend downgrading to 3.7

[ryanrabello]

I made a bug demo in a codesandbox. https://codesandbox.io/s/blueprint-table-bug-s167l?file=/src/App.tsx
Thanks for the workaround

[wshart]

Also having this issue and the workaround works for me too, thanks!

[Dessix]

Since 3.7 now causes lifecycle warnings in the current stable React, I ended up coming up with a workaround that worked in my use case:
Track the number of column resizes in a useState hook, then set the inline style paddingRight on a div wrapped around the Table to this count, modulo 2. Set onColumnWidthChanged to increment that state.
It tricks the viewport into changing for each time a column resize occurs, causing a rerender.

[evansjohnson]

Hey @adidahiya it looks like this was meant to be closed with #4884 but didn't get picked up since it closed 2 issues.

I'm not able to reproduce like seen in the gifs above at https://blueprintjs.com/docs/#table/features 🎉