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

Zeiler

Please add a Minimal, Complete and Verifiable example to show us what you have done so far. – Shedevil

Very good question i just had the same problem today! – Unbroken

thewebdev.info/2021/11/20/… check this if it helps – Guff

Answer 1

Add these lines in your all Select tag:

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

Ronnironnica

Thank you so much! – Maurita

Save my day! It should be the most robust solution. If the parent container has overflow: hidden, just setting menu z-index to 9999 cannot prevent the popup cropped by the parent container. – Kingfish

You made my day, this solution is for the case u have a parent div which set overflow: hidden. menuPortalTarget={document.body} did the trick – Dig

this is not working , Vicente's answer is working – Mildredmildrid

This solved my issue. I was opening it inside a small dialog, but I needed it outside. Thank you! – Perianth

For some reason, this removes any font styles applied to custom components. Overriding the z-index of menu instead of menuPortal does not do this. – Jeer

yey!!! i am using react-select-country-list which uses react-select and with this code added to the select component it worked!!! thanks so much – Spevek

This breaks when scrolling. The menu does not move with the parent element. – Lambdacism

the doc is super large; thx for the hint – Saucer

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}
/>

Sevilla

depending of @user11124592's markdown and CSS you're solution is completely valid and not necessary "hacky" :) – Mortensen

@Sevilla thanks for your answer. If anyone else comes here and has trouble with this approach. You might be using the portal of react-select which in that case you need to use: menuPortal: provided => ({ ...provided, zIndex: 9999 }) – Infralapsarian

@Vicente, I have a similar problem, but I cannot display the zIndex. Do you have any other properties for the dropdown to overlap the other components? – Transmittance

This is the superior solution. It's simpler and it can be applied to all Select components using a custom styles object. Additionally the other solution breaks when the page is scrolled as the portal is tied to the document body and not the menu element. Also it's not hacky, this is why z-index exists. – Lambdacism

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

Rimskykorsakov

Correction here - the menuPosition={'fixed'} should be menuPosition="fixed", with double quotes. – Bespeak

Double quotes or single quotes both work. It's a style preference. – Rimskykorsakov

Absolutely! Have a good one! – Rimskykorsakov

This fixed my problem! I have a material-react-table w/ the form dropdown located above the table. Adding these 2 lines made it so the dropdown items are above the table! I used menuPosition="fixed" – Brandon

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}
  //.....
  />  

Champignon

Adding yours "customStyles" only, works for me with "zIndex: 1000". But be careful with "Tooltips" or "Popovers" and add "zIndex" accordingly – Plate

You can remove menuPosition={'fixed'} attribute. It prevents scrolling if menu list overflows page. – Rew

Answer 5

Just simply add the below two lines of code.

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

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

Romano

Answer 6

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;
}

Meredithmeredithe

Answer 7

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 }),.

Frederick

Answer 8

TLDR:

In your (S)CSS, add this:

div[class*="-MenuPortal"] {
    z-index: 9999 !important;
}

It is so sad to see react developers raping CSS by putting styling into javascript. For any and all developers that think this is in any way a good idea - PLEASE STOP! CSS is there to do this stuff, not javascript. JS doesn't know where it's going to be in the DOM, so its support for the 'C' in CSS is at best a lucky guess.

Others have mentioned the term 'hacky' - there are few things hackier than auto-gen'ing css class names with JS.

Some of the answers above will work...sometimes...but they all rely on JS playing ball, which JS is simply not in a position to do.

So...here is a hacky solution for react-select dropdowns (this technique will work with any horrid auto-gen-css JS library) to work all the time - whether deep in the DOM or in a Modal/top-level and so on.

In your (S)CSS, add this:

div[class*="-MenuPortal"] {
    z-index: 9999 !important;
}

This will set the z-index for any div that has a class that contains -MenuPortal. Since you won't know the class name due to the infinite wisdom of react-select styling in JS, at least until they decide to change the autogen naming of classes (yuk!) to not include -MenuPortal this will work.

There is of course a possibility there is another div in your DOM that has this string - let's just hope it's another dropdown menu!

Apologies retrospectively for my soapbox rant on CSS-in-JS. With luck, one day there will be World Peace and JS will be a distant memory. In the meantime, keeping CSS well away from javascript and vide-versa is always a prudent move!

Happiness and smiles to you all! :-)

Granado

Answer 9

The code below worked for me. zIndex does not need to be 9999 (as suggested in other answers); just make sure the menu dropdown has a higher zIndex value than the other HTML elements.

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

Parthenon

Answer 10

This is my solution when using "react-select" (version 4.3.1)

import ReactSelect from 'react-select';
...
...
<ReactSelect
  className="custom_zindex"
  ...
  ...
/>

In the css file:

.custom_zindex {
   z-index: 100;  /* or 999 */
}

"className" is one of the props in react-select (https://react-select.com/props).

Rusticate

Answer 11

I was having a problem where I was trying to apply a z-index to both the select and the options menu. But it was only being applied to the select and not the menu.

I was able to fix it using this:

&:focus-within {
    z-index: 5;
}

For some reason when I tried

z-index: 5;

The options menu still had a lower z-index

Refractometer

Answer 12

Change the zIndex of the parent component of this select

<div style={{zIndex:1000}}>
  <React-Select-Component/>
</div>

Gemini