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

Share Improve this question Follow edited Dec 9, 2020 at 15:27 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Nov 22, 2017 at 13:34 Pankaj JatavPankaj Jatav 2,18422 gold badges1515 silver badges2222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.