React-select: Limiting number of options displayed in dropdown

[super-cache-money]

For example, how would one only show the 5 closest matches to input text in the dropdown, despite having 1000 options which are searchable.

[dcousens]

@super-cache-money how would they be sorted?

[ArcEglos]

If you are only concerned about the display this css may help you out:

.Select-option:nth-child(n+6) {
  display: none;
}
.Select-option:last-child,
.Select-option:nth-child(5) {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

I know this isn't pretty at all but as long as this doesn't impact your performance too hard it may be a quick-and-dirty workaround until this is implemented.

[nslobodchuk]

I'm in a similar situation. I've got 4000 options and would like to either limit the number of options displayed or start filtering only if the input is longer than 3 characters. Do you know if there's a way to do this?
Thanks in advance.

[chriddyp]

I'm in a similar case where I have just 6 options and I'd like to display all 6 options at once instead of requiring the user to scroll down just to see 1 more item.

Is CSS still the best way to do this?

[sttevan88]

+1

[onelz]

+1

[ramonvicelli]

+1

[aappddeevv]

Oh, I just hit this as well. To fit visually, I need to limit it to the dropdown just showing 2-3 options and scroll the rest. The above CSS will not display the options though. It looks like setting .Select-menu { max-height: 50px;} seems to constrain the dropdown size and preserve scrolling. Of course, this won't work well if you have more than one select and you need different sizes. I know that's slightly different than the problem statement in the first comment.

[peterbartos]

I created a PR which should provide filterMaxResults functionality in #2611

[sahilanguralla]

+1

[curliq]

+1

[javierojeda94]

Any updates on this?

[shaayaansayed]

+1

[douxsey]

You can use the props maxMenuHeight={200}

[toninofox]

In the meantime I am using in my code this (awful) workaround:

const MenuList = props => {
  return (
    <components.MenuList {...props}>      
      { Arrays.isArray(props.children) ? props.children.slice(0, 10) : props.children }
    </components.MenuList>
  );
};

Where 10 is my limit

export default () => (
  <Select
    defaultValue={colourOptions[1]}
    options={colourOptions}
    components={{ MenuList }}
  />
);

In this way you will still be able to search inside the list but you will display just the first 10 elements of the list

UPDATE:
This will create a lag hovering the element of the list due to another issue:
https://github.com/JedWatson/react-select/issues/2711

[cbmek]

Why not just go with AsyncSelect?

Example with limit:

<AsyncSelect
    loadOptions={(inputValue, callback) => {
        callback(selectOptions.slice(0, 50))
    }}
    defaultOptions={true}
    value={value}
    onChange={(val) => this.onValueChanged(val)}
/>

Example with limit and simple serach:

<AsyncSelect
    loadOptions={(inputValue, callback) => {
        callback(selectOptions.filter(x => x.label.toLowerCase().includes(inputValue.toLowerCase())).slice(0, 50))
    }}
    defaultOptions={true}
    value={value}
    onChange={(val) => this.onValueChanged(val)}
/>

[vitexikora]

Quick temp solution:

const resultLimit = 10
let i = 0
return <Select filterOption={({label}, query) => label.indexOf(query) >= 0 && i++ < resultLimit} onInputChange={() => { i = 0 }} />

[nhevia]

Solution provided by @vitexikora worked for me, but I'd like to point out that 'label' will be the visual option for the user, so I'd rather use value, which _should be_ sanitized and/or normalized.

const resultLimit = 10
let i = 0
return <Select filterOption={({value}, query) => value.indexOf(query.toLowerCase()) >= 0 && i++ < resultLimit} onInputChange={() => { i = 0 }} />

[KonstantinDinev]

@vitexikora that solution works great. Thanks!

[Carchuli]

@vitexikora solution worked for me also! Im dealing with 50k options, and with this solution I can search between that all records. The only issue is that it only displays the 10 first values, I will try to make it async using onMenuScrollToBottom prop to make it 'async' and load 10 more values

[jossmac]

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

1. v1 to v2 upgrade guide
2. v1 documentation and examples

[sankita15]

In case anyone is looking for dropdown menu with a limited number of options and scroll; use the maxMenuHeight prop:

<Select
  maxMenuHeight={175}
  options={options}
  value={value}
/>