How to make react-select options scrollable

Question

I have a list of options in being displayed in react-select. Since this component is at the lower edge of the screen the items tend to get cut off from the screen.

I noticed the selection lists provided in the official react-select provided has a scroll bar. I have tried looking at the docs and the GitHub page but i still couldn't figure out a solution.

The below image shows how my react-select options list is displayed.

My question is how do i make the list displayed to be scrollable.

The following is the code I have used.

import Select from 'react-select';

const SearchSelect = (props) => {
  const { options, defaultValue, onChange, name, label } = props;
  return (
    <>
      {label && <label htmlFor="search-select">{label}</label>}
      <Select
        options={options}
        defaultValue={defaultValue}
        onChange={onChange}
        name={name}
        id="search-select"
      />
    </>
  );
};

The option values are initially taken from an API and are passed into this component from the parent.

Answer 1

You can play with the maxMenuHeight prop:

<Select maxMenuHeight={250} />