How to make react-select options scrollable

问题

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.

回答1:

You can play with the maxMenuHeight prop:

<Select maxMenuHeight={250} />

回答2:

const menuPortalTarget = document.getElementById('root');
<Select
    maxMenuHeight={220}
    menuPlacement="auto"
    menuPortalTarget={menuPortalTarget}
/>

maxMenuHeight - limit your menu height to the given input in my case it limits at 220px and then you can see in image scroll bar is added.

menuPlacement - it can show your menu above or below your select input according to available space in auto

来源：https://stackoverflow.com/questions/54628333/how-to-make-react-select-options-scrollable

标签

reactjs

react-select