reactjsreact-select

How to change zIndex in react-select drowpdown

I am using the react-select library to create autocomplete drop-down. I have used 2 drop-down parallel if 2nd has some data & I open first one then the zIndex problem comes. see the imageenter image description here

Solution

  • Add these lines in your all Select tag:

    <Select 
    // other props
    menuPortalTarget={document.body} 
    styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
/>