scrollToRow on List with dynamic heights and CellMeasurer doesn't always scroll to the proper location

On a List with many items, all of dynamic height that are measured using a CellMeasurer, sometimes, jumping to a smaller row index n from larger row m index fails. This more frequently happens when m is much larger than n.

Here’s a plunkr to reproduce this behavior: https://plnkr.co/edit/B1463DyuByuIlmWTynRn

Steps:

1. Enter a number between 600-800 in the box, and hit “Jump to row…”
2. Enter a number between 200-400 in the box, and hit “Jump to row…”. Check whether the row is visible.
3. Repeat steps 1 and 2, using a different number in the ranges each time, until you notice that the row in step 2 isn’t visible after the jump.

It usually takes anywhere from 1-5 repetitions for it to first occur. I’ve also noticed the error occurs with decreasing frequency the more jumps are done.

[yogurt1]

I have solution

/**
 * Scroll to bottom of List/Grid
 */
const step = () => {
  const element = // .ReactVirtualized__Grid or List element
  const maxScrollTop = element.scrollHeight - element.clientHeight;

  if (maxScrollTop > element.scrollTop) {
     listRef.scrollToPosition(maxScrollTop); // Ref to <List /> component instance (or Grid)
     requestAnimationFrame(step);
  }
};

step();

You should do scroll until row index is >= startIndex and <= stopIndex scrollTop can be found by List#getOffsetForRow

[nullnoid]

I have the same issue, my workaround is to call scrollToRow again in the setState callback, like:

this.listNode.scrollToRow(idx);
this.setState({ scrollingToRow: idx }, () => {
    this.listNode.scrollToRow(idx);
});