React-select: Can't able to scroll while initial load custom dropdown

[kishan143-jaiswal]

<Select
name={subCat.name}
id={subCat._id}
classNamePrefix="react-select"
value={getSelectedkeywords(subCat.frontEndKeywords,cat._id)}
isMulti={true}
components={{MenuList,ValueContainer,Option,}}
onChange={(val) =>handleChangeKeyword(val,subCat,cat._id)}
getOptionLabel={(option) =>option.name}
getOptionValue={(option) => option._id}options={subCat.frontEndKeywords.map(
(keyword) => {
if (
activeKeywords.length >
0 &&
activeKeywords.indexOf(
keyword._id
) <
0
) {
keyword.isDisabled = true;
} else {
keyword.isDisabled = false;
}
return keyword;
}
)}
isSearchable={
true
}
styles={
customStyles
}
/>

inital load scroll is not working on mouse wheel, once option selection and again opening on dropdown mouse wheel scroll starts working

const MenuList = (props) => {
    return (
        <components.MenuList {...props}>
            <div style={{ height: 120 }}>
                <Scrollbars
                    style={{ zIndex: 9999 }}
                    renderThumbVertical={props => <div {...props} className="thumb-vertical" />}
                >
                    {props.children}</Scrollbars>
            </div>
        </components.MenuList>
    );
};

[driesd]

+1

[sk-iv]

You can disable this behaviour by using the captureMenuScroll prop by setting its value to false
<Select captureMenuScroll={false} {...} />

[kishan143-jaiswal]

thanx for reply. its worked