Firefox - Empty rows after scroll and data filtering

What is the current behavior?

In Firefox, if you scroll down and then update the table data (by some filter for example), only a subset of the rows will be rendered with blank space in between rows.

Here is the sandbox to reproduce: https://codesandbox.io/s/react-virtualized-5ukgi

It seems to only happen when the table had scrollbars and after the update it no longer needs scrollbars. i.e. All the rows can fit in view.

What is the expected behavior?

All filtered rows show display.

I’ve tried to resolve this by forceUpdateGrids on MultiGrid ref, forceUpdate on my component after componentDidUpdate, etc… Nothing seems to work. Note: if there are horizontal scrollbars, and I scroll, it will reveal the

Any workaround would be much appreciated. I don’t think I’ll be able to upgrade at this point. Thanks in advance.

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	Firefox (latest)
OS	Windows
React	16.8.6
React DOM	16.8.6
react-virtualized	9.21.0

In the sandbox, it works in react-virtualized 9.7.5 and a few other versions above. I haven’t been able to pinpoint at which version it breaks. I’ll post more info as I go.

Note: I did try downgrading in my environment but it was still broken.

Update

I found that this breaks in Firefox between version 9.18.5 --> 9.19.0 of react-virtualized.

Works: https://codesandbox.io/s/react-virtualized-forked-dcch6 Broken: https://codesandbox.io/s/react-virtualized-forked-n8kks

I’m still trying to debug what caused the issue, but my hunch is that it has to do with the deprecated React lifecycle methods: https://github.com/bvaughn/react-virtualized/blob/9.19.0/CHANGELOG.md

None of the other commits seem to have any breaking changes.

@wuweiweiwu @bvaughn any ideas?

[alxbradley]

@kad3nce In the sandbox code there’s a div wrapper around the AutoSizer component with the class “table-wrapper”. What I did was something like the following,

componentDidUpdate(prevProps, prevState) {
  if (prevProps.data.length > this.props.data.length) {
    this.setState({
      tableKey: this.state.tableKey + 1  // update the key
    });
  }
}

render() {
  return (
    <div
      key={ 'my-table-' + this.state.tableKey }  // <--- a unique key that changes every time the data size is reduced
      className="table-wrapper"
      style={{ display: "flex", flex: 1 }}
    >
      <AutoSizer>{ ... }

The key will force React to re-build the DOM tree, and re-mount the Grid. Hope this helps!

[alxbradley]

After playing around some more I found that this isn’t an issue in React v16.2.0. Some change in React 16.3.0 seems to have caused this issue.