I am using two packages:

1. react-select
2. reactScrollbar

I am using react scroller for smooth scrolling in my project. Inside the react scroller I am using react-select for smooth drop down.

Issue: Whenever I scroll for my react select dropdown. The parent scroll event also get fired and react-select closed it's dropdown. Due to that I am unable to select the value form dropdown.

I am using two packages:

1. react-select
2. reactScrollbar

I am using react scroller for smooth scrolling in my project. Inside the react scroller I am using react-select for smooth drop down.

Issue: Whenever I scroll for my react select dropdown. The parent scroll event also get fired and react-select closed it's dropdown. Due to that I am unable to select the value form dropdown.

• javascript
• reactjs
• dom-events
• mouseevent
• react-select

2 Answers 2

My onWheel was scrolling the parent react-scrollbar scroll, so i added onWheel handler as follows on parent div of react select. Hope this helps

onWheel=(e)=>{
 e.stopPropagation();
}

<div onWheel={this.onWheel}
 <Select ../>
</div>

you can add menuPortalTarget={document.body} inside select tag.Like,

<select
...
menuPortalTarget={document.body}/>

It will attach your select ponent with document.body and dropdown won't be closed during scrolling.