React-virtualized: InfiniteLoader stops working with WindowScroller and autoHeight

[ms007]

Hi

I'm struggling using InfiniteLoader together with WindowScroller.
The code below loads pages of 10 items until 100 items are visible.
When I remove the autoHeight from the List then everything is working as expected, but it doesn't scroll nice.
When autoHeight is set, scrolling works but it only shows 28 items and never invokes loadMoreRows.

I was not able to convert the code to a working plunker but I hope you are able to reproduce the issue.
Thanks for looking into it!

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { List, WindowScroller, InfiniteLoader } from 'react-virtualized';

export default class SearchResults extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: []
    };

    this.index = 0;

    this.isRowLoaded = this.isRowLoaded.bind(this);
    this.loadMoreRows = this.loadMoreRows.bind(this);
    this.rowRenderer = this.rowRenderer.bind(this);
    this.loadDummyItems = this.loadDummyItems.bind(this);
  }

  componentDidMount() {
    this.loadDummyItems(40).then(items => this.setState({ list: items }));
  }

  loadDummyItems = number => {
    const createRoom = () => {
      const name = 'Room '+ this.index++;
      return { name };
    };

    const rooms = [];
    for (let i = 0; i < number; i++) {
      rooms.push(createRoom());
    }

    return new Promise(resolve => {
      setTimeout(resolve(rooms), 600);
    });
  };

  render() {
    const { list } = this.state;

    return (
      <div>
        <WindowScroller>
          {({ height, width }) =>
            (<InfiniteLoader
              isRowLoaded={this.isRowLoaded}
              loadMoreRows={this.loadMoreRows}
              rowCount={100}
            >
              {({ onRowsRendered, registerChild }) =>
                <List
                  autoHeight
                  ref={registerChild}
                  height={height}
                  onRowsRendered={onRowsRendered}
                  rowCount={list.length}
                  rowHeight={30}
                  rowRenderer={this.rowRenderer}
                  width={width}
                />}
            </InfiniteLoader>)}
        </WindowScroller>
      </div>
    );
  }

  isRowLoaded({ index }) {
    const { list } = this.state;
    return !!list[index];
  }

  loadMoreRows({ startIndex, stopIndex }) {
    console.log('loaded');
    const { list } = this.state;
    if (list.length > 100) {
      return Promise.resolve();
    }

    return this.loadDummyItems(10).then(items => this.setState({ list: [...list, ...items] }));
  }

  rowRenderer({ index, key, style }) {
    const { list } = this.state;

    const row = list[index];
    const content = row.name;

    return (
      <div key={key} style={style}>
        {content}
      </div>
    );
  }
}

[bvaughn]

Hello! 😄

For this type of question, I suggest using Stack Overflow with a #react-virtualized tag or asking in the react-virtualized Slack channel. Issues are reserved for bug reports and feature-requests.

I also suggest you take the time to convert it to a Plnkr before asking because you're more likely to get a response that way. You can fork this one to get started.

This helps keep the project somewhat more maintainable for me _and_ hopefully gets you an answer faster (since more people check those places than monitor GitHub issues). 😄

[ms007]

You are right.
Was a long day and should have been looking on Stack Overflow first.

Found a similar question on Stack Overflow.
https://stackoverflow.com/questions/41896969/how-is-possible-to-combine-infiniteloader-with-windowscroller

[bvaughn]

Glad to hear 😁

[nuragic]

Hi! I've got the exact same issue but the SO example didn't helped unfortunately... Can I ask how you eventually solved it @ms007? Thanks!