How to show scrollbar on dropdown menu for react-select?

Question

Scrollbar is not showing on dropdown menu for react select on chrome navigator, meanwhile it works for safari ,how do i fix that please ? any solution for it ? because I cannot scroll to my last item. thanks in advance. I am using react-select version 2.4.2.

import Select from 'react-select';

 <Select
   name={this.props.name}
   isSearchable
   isClearable
   defaultMenuIsOpen={this.state.defaultMenuIsOpen}
   value={this.state.selectedOption}
   onChange={this.handleChange}
   options={this.state.data}
   placeholder={this.props.placeholder}
 />

Could you produce a live example ? I have created on here and I can see the scrollbar codesandbox.io/s/42vyq93rw — Laura

Shreyas Wade Shreyas Wade · Accepted Answer · 2020-01-23T06:02:00

export const customStyleForTestsList = {
    control: (base, {isFocused}) => ({
        ...base,
        height: '30px' 
    }),
    option: (styles, {data, isDisabled, isFocused, isSelected}) => {
        return {
            ...styles,
            overflowY: 'scroll'
        };
    }
};

These are the styles you pass as style={{styles: customStyleForTestsList}} to the Select. I know something has to be done in the option part. What, I still am clueless. If you found you answer, please post it here.

How to show scrollbar on dropdown menu for react-select?

1 Answers