'Scrolling anomaly with CellMeasurer, AutoSizer, List

first off, I've had much success and use this library in multiple places. So far it's worked great. I've run into an issue though that I cannot solve. I have a list of questions that can be added/removed from a category. There is a Teleprompter component which contains the virtualized list and displays the questions in the category. Whenever a question is added or removed from the category, the Teleprompter jumps its scroll position - usually back to the top of the list..

I've spent many hours trying to figure out what is causing this scroll jump. IS this expected behavior? My List setup is:

          <ListWrapper
            backgroundColor={backgroundColor}
          >
            <AutoSizer>
              {
                ({ width, height }) => {
                  if (lastMeasuredWidth !== width) {
                    setTimeout(() => {
                      cache.clearAll();
                      if (listEl.current) {
                        listEl.current.recomputeRowHeights();
                      }
                    }, 0);
                  }
                  setLastMeasuredWidth(width);
                  return (
                    <StyledList
                      width={width}
                      height={height}
                      rowHeight={cache.rowHeight}
                      rowRenderer={rowRenderer}
                      rowCount={getQuestionList().length}
                      overscanRowCount={0}
                      ref={listEl}
                    />
                  );
                }}
            </AutoSizer>
          </ListWrapper>

and rowRenderer:

  const rowRenderer = (rowData) => {
    const {
      index,
      key,
      parent,
      style
    } = rowData;

    const questionData = {
      hideName,
      hideTimestamp,
      backgroundColor,
      textColor,
      fontSize,
      selectedFolder
    };

    return (
      <CellMeasurer
        key={key}
        cache={cache}
        parent={parent}
        columnIndex={0}
        rowIndex={index}
      >
        <Row
          index={index}
          key={key}
          style={style}
          backgroundColor={backgroundColor}
        >
          <Question question={getQuestionList()[index]} data={questionData} />
        </Row>
      </CellMeasurer>
    );
  };

I've scoured the forums trying to find a solution, but I've come up fruitless.. Any help would be greatly appreciated!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source