[v2] react-select didn't work for long lists

Hi there

I’m testing out react-select v2 and I noticed performance issues once when I have a long lists of 300,000 items. I wanted to know if there is any interest to build in something like react-virtualized into react-select so users can scroll through long lists without jank or is this out of scope of this project.

Thanks.

[tmacdonald]

@bvaughn https://codesandbox.io/s/lxv7omv65l

[Janpot]

Another small issue with @tmacdonald solution is that the menu doesn’t shrink when there’s small amount of options when typing in the search box.

PS: I slightly modified the solution with VariableSizeList to account for option groups

import React from 'react';
import Select from 'react-select';
import { VariableSizeList as List } from 'react-window';

const GROUP_HEADER_HEIGHT = 13;
const ITEM_HEIGHT = 34;

function MenuList (props) {
  const { options, getValue } = props;
  const [ value ] = getValue();

  const initialOffset = options.indexOf(value) * ITEM_HEIGHT;

  const children = React.Children.toArray(props.children);

  function getOptionSize (option) {
    if (option.options) {
      return option.options.length * ITEM_HEIGHT + GROUP_HEADER_HEIGHT;
    }
    return ITEM_HEIGHT;
  }

  function getItemSize (i) {
    return getOptionSize(options[i]);
  }

  const totalHeight = options.reduce((height, option) => {
    return height + getOptionSize(option);
  }, 0);

  const estimatedItemSize = totalHeight / options.length;

  return (
    <List
      height={Math.min(totalHeight, 300)}
      itemCount={children.length}
      itemSize={getItemSize}
      estimatedItemSize={estimatedItemSize}
      initialScrollOffset={initialOffset}
    >
      {({ index, style }) => <div style={style}>{children[index]}</div>}
    </List>
  );
}