React-virtualized: ScrollToIndex not scrolling as expected

[matthew-matvei]

I've created a small repro based on what we're experiencing trying to make use of <List />'s scrollToIndex prop. I believe it's a bug, given how simple the repro is and how closely we've attempted to follow documentation / examples, but it's always possible we've just mixed something up.

What is the current behavior?

1. Clone the repro here
2. Build and start the app (I've been using recent version of Chrome)
3. Enter a number between 0 and 999 in the number input at the top of the screen

Despite the scrollToIndex state in <App /> being updated, which feeds down to the <List />'s scrollToIndex prop, the list is not navigated to the desired list element as expected.

What is the expected behavior?

The element at the index given in the number input box is navigated to.

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 | Chrome v69.0.3497.100 |
| OS | Windows 10 |
| React | 16.5.2 |
| React DOM | 16.5.2 |
| react-virtualized | 9.20.1 |

[matthew-matvei]

I have found this issue isn't apparent after downgrading react and react-dom to versions 16.3.2. I hope that helps, but I will leave this open since I don't think downgrading is an acceptable solution.

[michaeldzjap]

1179 is related

[alexandrzavalii]

Anyone has a workaround for this ?

[matthew-matvei]

A workaround would be downgrading React. Version 16.3.2 worked for us.

[KaySackey]

I'm using this currently as a workaround.
It's pseudo-code that I extracted from a much larger file, but it's a start on a workable solution.

    componentDidMount(){
        if (this.props.start_index < 0) {
            return;
        }

        const initial_top = this._list_ref.getOffsetForRow({
            alignment: "start",
            index: this.props.start_index,
        });

        window.scrollTo(0, initial_top);
    }

    render(){
        return (
            <List ref={ref => this._list_ref = ref} {...other_props} scrollToIndex={this.props.start_index}/>
        )
    }

Basically it manually calls getOffsetForRow after mounting, then scrolls the window the correct location. The scrollToIndex prop is still required, or else the List component will not render the correct rows initially.

I have been using this with WindowScroller, so I have no idea if it works solo as WindowScroller does things like patch the scrollTop.

[cquiroz]

I'm badly affected by this bug, the workaround suggested didn't work for me on a regular Table. Any other ideas?

[jaycrypto]

I've made a PR which should fix this issue.

[TilWs]

Having the same issue on react and react-dom 16.3.2. Any updates?

[bhearsum]

There's a number of Issues open about this, but I think it was fixed in #1288, and then that was backed out in #1446. See also: #1179.

[stevenmasci]

Hi, I'm also having the same issue, react react-dom 16.12.0, react-virtualized 9.21.2.

As a work around I'm manually calculating the window scroll offset by multiplying _scrollToIndex_ by _rowHeight_ and then using window.scrollTo().

[Dean177]

I too am encountering this issue with react/[email protected] and [email protected].

I was able to get it kinda (still seems to be a positioning bug?) by downgrading react-virtualized to 9.21.1 and using a a ref on the List component:

let listScroll = React.useRef();
let onEvent = () => {
  listScroll.current.scrollToRow(200)
}

return (
  <List
    ref={listScroll}
    {...otherProps}
  />

[Uneedcode]

I have the same bug. so bad