bvaughn / react-virtualized

React components for efficiently rendering large lists and tabular data
http://bvaughn.github.io/react-virtualized/
MIT License
26.33k stars 3.05k forks source link

Filtering records in List with WindowScoller and Autosizer causes window to auto-scroll arbitrary distances #1402

Closed ElmoJones3 closed 3 weeks ago

ElmoJones3 commented 5 years ago

Do you want to request a feature or report a bug?

Report a Bug

What is the current behavior?

First off - love this library thanks for all the hard work!

In Chrome Version 75.0.3770.142, filtering records fed to a Virtualized List when using AutoSizer and WindowScoller scrolls the screen an arbitrary distance, and requires re-scrolling to re-adjust its render logics.

This virtual list has been in production in this configuration for ~3months, so the behavior has just recently begun if that's helpful. I've attached a GIF and Screen Recording

GIF: Screen Recording 2019-07-19 at 11 36 AM

Video Recording: https://cl.ly/bf3c8c7d0eed

Without exposing too much, I have made sure to pass style correctly (common issue in these bug reports), and my use of WindowScroller is pretty barebones (pasted below):

// HOC that lets us optionally use WindowScroller
export default function withWindowScroller(WrappedComponent) {
  return props => (
    <WindowScroller>
      {({ height, isScrolling, onChildScroll, scrollTop }) => (
        <WrappedComponent
          {...props}
          autoHeight
          height={height}
          isScrolling={isScrolling}
          onScroll={onChildScroll}
          scrollTop={scrollTop}
        />
      )}
    </WindowScroller>
  );
}
// Render helper that passes components to rowRender 
import React from 'react';
import { CellMeasurer } from 'react-virtualized';
// cache,
// getRowData,
// list: listEl.current,
// records,
// useDynamicRowHeight
export default function renderRowHelper({
  component: Component,
  ...renderProps
}) {
  return ({ cache, getRowData, records, useDynamicRowHeight }) => ({
    index,
    // isScrolling,
    // isVisible,
    key,
    parent,
    style
  }) => {
    const record = getRowData({ records, index });

    const content = (
      <Component style={style} key={key} record={record} {...renderProps} />
    );

    if (useDynamicRowHeight) {
      return (
        <CellMeasurer
          cache={cache}
          columnIndex={0}
          key={key}
          parent={parent}
          rowIndex={index}
        >
          {content}
        </CellMeasurer>
      );
    }
    return content;
  };
}

What is the expected behavior?

The virtuallist should re-render the latest data set without the scroll to behavior.

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?

This worked flawlessly up until a week ago. Would like to know if there are breaking changes or something I missed, or if anyone else has seen this issue.

Thanks!!!

Browser Google Chrome
OS MacOS
React 16.8.1
React DOM 16.8.1
react-virtualized 9.21.1
ElmoJones3 commented 5 years ago

FWIW the only patch that looks relevant here is

https://github.com/bvaughn/react-virtualized/pull/1288/files

which appears to modify the logic that handles scrollTop position - freezing the dependency at 9.21.0 eliminates the issue.