`scrollToRow()` on `List` with `WindowScroller` not working

[beschler]

Bug Report

Background

I'm using an implementation of react-virtualized with:

• WindowScroller to allow scrolling to happen on the page (not within a container), and an onResize event handler to clear the CellMeasurerCache (for a responsive layout)
• AutoSizer for calculating automatic an width (for a responsive layout)
• List to display basic content in one column (an image and text on every row)
• CellMeasurer with an <img /> onLoad to calculate the dynamic height of each row (they will all be different depending on what image/text is on that row),

My reason for using react-virtualized is because the core of my site is an infinitely scrolling vertical list with large images, and the page will get very large very quickly if new elements were just appended to the bottom as you scrolled.

Issue

I am attempting to call the List public method scrollToRow() so when you click on a button (will eventually be a nav link), you're scrolled to a particular row on the page. However it doesn't appear to be working. (I'm very new to react-virtualized.)

Code

CodeSandbox: https://codesandbox.io/p/sandbox/photolist-react-virtualized-fzhtm9?file=%2Fsrc%2FApp.js

import { useRef } from "react";
import {
  CellMeasurerCache,
  CellMeasurer,
  WindowScroller,
  AutoSizer,
  List,
} from "react-virtualized";

import "./styles.css";

const dummydata = [
  // ...
];

const cellMeasurerCache = new CellMeasurerCache({
  defaultHeight: 50,
});

function rowRenderer({ key, index, isScrolling, isVisible, style, parent }) {
  return (
    <CellMeasurer
      cache={cellMeasurerCache}
      columnIndex={0}
      key={key}
      parent={parent}
      rowIndex={index}
    >
      {({ measure, registerChild }) => (
        <div
          ref={registerChild}
          style={style}
          data-key={key}
          data-is-visible={isVisible}
        >
          <div>
            {dummydata[index].id} -- {dummydata[index].text}
          </div>
          <img
            className="img"
            onLoad={measure}
            src={dummydata[index].img}
            alt={dummydata[index].text}
          />
        </div>
      )}
    </CellMeasurer>
  );
}

export default function App() {
  const listRef = useRef();

  function goToRow(index, e) {
    // NOT WORKING
    listRef.current.scrollToRow(index);
  }

  function clearCellMeasurerCache() {
    cellMeasurerCache.clearAll();
  }

  return (
    <div className="App">
      <h2>PhotoList</h2>
      <div style={{ paddingBottom: "1em" }}>
        <button onClick={goToRow.bind(this, 9)}>SCROLL TO ROW 10</button>
      </div>
      <WindowScroller onResize={clearCellMeasurerCache}>
        {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (
          <AutoSizer disableHeight>
            {({ width }) => (
              <div ref={registerChild}>
                <List
                  ref={listRef}
                  width={width}
                  height={height}
                  autoHeight
                  rowCount={dummydata.length}
                  deferredMeasurementCache={cellMeasurerCache}
                  rowHeight={cellMeasurerCache.rowHeight}
                  rowRenderer={rowRenderer}
                  isScrolling={isScrolling}
                  onScroll={onChildScroll}
                  scrollTop={scrollTop}
                />
              </div>
            )}
          </AutoSizer>
        )}
      </WindowScroller>
      <div>End</div>
    </div>
  );
}

What is the current behavior?

I have created a button at the top of the List which has an onClick function which attempts to call the List public method scrollToRow() with an index value of 9 (the 10th row). Clicking the button does not scroll to row 10. No error is thrown.

No outside dependencies in my project.

What is the expected behavior?

I expect the List to scroll to row 10 when the button is clicked.

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?

Device	MacBook Pro 16-inch, 2023, M2 Pro
Browser	Google Chrome Version 123.0.6312.58 (Official Build) (arm64)
OS	macOS Ventura 13.6.5 (22G621)
React	18.2.0
React DOM	18.2.0
react-virtualized	9.22.5

[richardkc]

I have this problem too

[Ksrotem]

same issue here, using windowsScroller with a table