react-virtualized ScrollToIndex not scrolling as expected

trafficstars

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?

Clone the repro here
Build and start the app (I've been using recent version of Chrome)
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

Oct 01 '18 15:10 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.

Oct 03 '18 08:10 matthew-matvei

#1179 is related

Oct 03 '18 16:10 michaeldzjap

Anyone has a workaround for this ?

Oct 04 '18 14:10 alexandrzavalii

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

Oct 04 '18 16:10 matthew-matvei

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.

Oct 08 '18 21:10 KaySackey

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

Oct 31 '18 14:10 cquiroz

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

Dec 14 '18 11:12 john-veresk

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

Dec 21 '18 14:12 TilWs

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.

Jan 10 '20 14:01 bhearsum

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().

Feb 14 '20 01:02 stevenmasci

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}
  />