Mouse scroll event Is not working for react select inside react scrollbar

user_4925026 0
Viewed 2093

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.

react-select reactjs mouseevent dom-events javascript
2 Answers

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>
user_76870910

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

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

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

user_95578950
Related