React-Select with VList Option List

[adventofryz]

import ReactSelect, {components, createFilter} from 'react-select';
import SimpleBar from 'simplebar-react';
import {useTranslation} from 'react-i18next';
import React, {useMemo} from 'react';
import {VList} from 'virtua';
import classNames from 'classnames';

const menuHeaderStyle = {
  padding: '8px',
  color: 'white',
};

//Simplebar compatible Root component for VList
const Root = React.forwardRef(({children, attrs, width, height, scrolling}, ref) => {
  return (
    <SimpleBar autoHide={false} scrollableNodeProps={{ref}} {...attrs}>
      <div
        style={useMemo(() => {
          return {
            position: 'relative',
            visibility: 'hidden',
            width: width ?? '100%',
            height: height ?? '100%',
            pointerEvents: scrolling ? 'none' : 'auto',
          };
        }, [width, height, scrolling])}
      >
        {children}
      </div>
    </SimpleBar>
  );
});

const DefaultItemHeight = 40;

const CustomMenu = (props) => {
  const {children, maxHeight} = props;

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

  const isGroup = !!childrenOptions?.[0]?.props?.data?.options;

  const wrapperHeight =
    isGroup || maxHeight < childrenOptions.length * DefaultItemHeight
      ? maxHeight
      : childrenOptions.length * DefaultItemHeight;

  return (
    <VList style={{height: wrapperHeight}} components={{Root}}>
      {children}
    </VList>
  );
};

const IconOption = (props) => {
  const {onMouseMove, onMouseOver, ...rest} = props.innerProps;
  const newProps = {...props, innerProps: rest};

  return (
    <components.Option {...newProps} className="custom-option">
      <div
        style={{
          whiteSpace: props?.selectProps?.multiLineLabel ? 'pre-wrap' : 'nowrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}
      >
        {props.isSelected && <i className="ri-check-line float-end"></i>}
        <span>{props.data.label}</span>
      </div>
    </components.Option>
  );
};

const Select = (props) => {
  const {t} = useTranslation();
  const options = {Option: IconOption};

  const {showSelectDeselectAll, hideDropAndSeparator, hideIndicator} = props;

  const finalValue = useMemo(() => {
    let processedVal;
    if (Array.isArray(props.value)) {
      processedVal = props.value?.map((option) => {
        if (option.trans) {
          option.label = t(option.label);
        }
        return option;
      });
    } else if (props.value?.trans) {
      processedVal = props.value;
      processedVal.label = t(props.value.label);
    } else {
      processedVal = props.value;
    }
    return processedVal;
  }, [t, props.value]);

  // if (showSelectDeselectAll) options['MenuList'] = MenuList;

  //change scrollbar from browser style to simplebar
  options['MenuList'] = CustomMenu;
  if (hideDropAndSeparator) {
    //hide dropdown indicator
    options['DropdownIndicator'] = () => null;
    //hide dropdown separator
    options['IndicatorSeparator'] = () => null;
  } else if (hideIndicator) {
    options['IndicatorSeparator'] = () => null;
  }
  return (
    <ReactSelect
      {...props}
      value={finalValue}
      components={options}
      classNamePrefix="select"
      menuPlacement="auto"
      className={'react-select ' + (props.className ? props.className : '')}
    />
  );
};

export default Select;

Hi, I am trying to virtualize react-select by using VList for its option list but I have a problem with height management.

In Custom Menu component with VList, I am trying to keep height dynamic for children elements until it reaches maxheight of 300 after which I will enable scrolling but not sure how to do this. For now I am just keeping a defaultItemHeight which is incorrect and doesnt look nice.

[inokawa]

You may have already checked, this repo had an example with react-select in the past.
It was deleted because some undesirable behavior was found in its edge case, but it may help at some extent.

I am trying to keep height dynamic for children elements until it reaches maxheight of 300 after which I will enable scrolling

Older version of VList had min-height on it's style so upgrading to the latest version of virtua may work. Unfortunately we removed components prop at 0.20.0 so you have to do some migration if you do it https://github.com/inokawa/virtua/releases/tag/0.20.0

[adventofryz]

It has been many months and I still wish to implement VList with React-Select V2.

Currently MenuList and Option are the two components I will touch.

MenuList will contain the Virtualized list with children.

Option will contain a singular Item.

Problems:

1. Say you have 40,000 elements in the virtualized list. The callback fired when you mouse move has noticable lag. Same with key up and down, and pressing enter key.
2. Searching/Filtering by typing in search box is also very slow. Selected and non-selected elements when you hover over multiple elements quickly or keyboard actions up and down are also very slow.
3. Dynamic Height might pose a problem for virtualization so for now I will work with static height of 40px.

If I missed any problem point please let me know.
Could you provide some tips on what things I need to keep in mind to make this work?