How to change zIndex in react-select drowpdown

Question

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 image

Answer 1

Add these lines in your all Select tag:

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

Answer 2

Try this hacky way of setting zIndex, and let me know if it worked :)

<Select
  styles={{
    // Fixes the overlapping problem of the component
    menu: provided => ({ ...provided, zIndex: 9999 })
  }}
  value={selectedOption}
  onChange={evt => onSelectChange(evt, index)}
  options={options}
/>

Answer 3

After seeing the half dozen related issues, yet not finding a resolution, I have finally found one.

<Select
    menuPortalTarget={document.body}
    menuPosition={'fixed'} 
/>

Add these two options to your Select component.

It appears to make us of the new React Portal feature.

EDIT: If you do the above, you then run into this problem with the menu anchoring to the page due to position: fixed. Removing it may help. https://github.com/JedWatson/react-select/issues/4088

Answer 4

For me the solution was kind of the total of all the answers (thanks!);

 const customStyles = {
    ///.....
    menuPortal: provided => ({ ...provided, zIndex: 9999 }),
    menu: provided => ({ ...provided, zIndex: 9999 })
    ///.....
  }


 <Select
  //.....
  menuPortalTarget={document.body}
  menuPosition={'fixed'} 
  styles={customStyles}
  //.....
  />  

Answer 5

Another way is We can config the classNamePrefix and control it through the outer class.

import Select from "react-select";

<Select
   classNamePrefix={"my-custom-react-select"}
/>

.my-custom-react-select__menu {
  z-index: 2;
}

Bonus, We can re-style everything

.my-custom-react-select__control {
  border-width: 1px !important;
  border-color: #cbd5e0 !important;
  padding-top: 0.16rem;
  padding-bottom: 0.16rem;
}

.my-custom-react-select__control--is-focused {
  border-color: #746df7 !important;
  box-shadow: none !important;
}

.my-custom-react-select__indicator-separator {
   display: none;
}

Answer 6

Only combination of those answers made the working solution for me on Next.js. menuPortalTarget={document.body} broke the application with the error ReferenceError: document is not defined, which makes sense on SSG/SSR :)

menuPosition={"fixed"} as suggested by @I Stand With Israel with combination of answer from @hemant rao: menuPortal: (base) => ({ ...base, zIndex: 4 }),.

Answer 7

Just simply add the below two lines of code.

 const customStyles = {
    ///.....
    menuPortal: provided => ({ ...provided, zIndex: 5 }),
   
    ///.....
  }

 <Select
  //.....
  menuPosition={'fixed'} 
  styles={customStyles}
  //.....
  />