React Virtualized List scrolling out of view

Question

I have a working virtual scrolling Grid for to display a document by sections on the page. I now added another RV for search results, but for some reason the contents scroll out of view when I scroll down!! I tried to simplify it to just use a List with predetermined heights and eliminate potential factors and it still gave me this strange bug. The code itself works as expected, it is the list which is acting up. (I'm actually using Cell Measurer to get row height, but even with the following version it acts up). Here is the code:

const rowRenderer = ({ index, isScrolling, style, key  }) => 
  this.resultRowRenderer(index, key, style, curList)

resultRowRenderer(index, key, style, list) {
  ...
  return <Markup content={quote} onClick={() => jumpToLocCallback(location)} />       
}

render() {
  ...
  const renderList = (curList, i) => {
    const rowCount = curList.results.length

    return (
      <List
        key={i}
        height={100}
        rowHeight={30}
        rowCount={rowCount}
        rowRenderer={rowRenderer}
        overscanRowCount={0}
        width={700}
        ref={(ref) => this.List = ref}
      />
    )
  }

  const renderLists = searchResultsLists.map(renderList)

  return (
    <div className='results-sidebar'>
      {renderLists}
    </div> 
  )
}

Thanks

Answer 1

but for some reason the contents scroll out of view when I scroll down!!

This is almost always caused by a missing style value. (See here.)

In your case, you should change this:

resultRowRenderer(index, key, style, list) {
  quote = '...'
  return <Markup content={quote} onClick={() => jumpToLocCallback(location)} />
}

To this:

resultRowRenderer(index, key, style, list) {
  quote = '...'
  return (
    <Markup
      content={quote}
      key={key}
      onClick={() => jumpToLocCallback(location)}
      style={style}
    />
  )
}

Note the added key and style attributes. ;)