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

Please add a [Minimal, Complete and Verifiable example](https://stackoverflow.com/help/mcve) to show us what you have done so far. — Björn Böing, Apr 24 '19 at 13:12
https://thewebdev.info/2021/11/20/how-to-change-zindex-of-the-items-in-a-react-select-drop-down/ check this if it helps — Kishor, Apr 12 '22 at 03:54

score 141 · Accepted Answer · edited Jun 26 '21 at 03:31

141

Add these lines in your all Select tag:

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

edited Jun 26 '21 at 03:31

Akash Kumar Verma

3,185
2
16
32

answered Sep 15 '20 at 09:15

hemant rao

2,233
2
13
14

Thank you so much! – Muslem Omar Mar 31 '21 at 18:22
2

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. – Renyuan wang Apr 27 '21 at 08:38
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 – Minh Kha Jul 21 '21 at 04:43
2

this is not working , Vicente's answer is working – Chuyi Huang Oct 13 '21 at 10:48
1

This solved my issue. I was opening it inside a small dialog, but I needed it outside. Thank you! – user.io Feb 09 '22 at 12:58
1

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. – ADK Apr 19 '22 at 05:08
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 – Fo Nko May 25 '22 at 12:15
This breaks when scrolling. The menu does not move with the parent element. – NickC Jun 15 '22 at 21:47
the doc is super large; thx for the hint – Ben Nov 23 '22 at 09:36

score 70 · Answer 2 · answered Apr 24 '19 at 14:03

70

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

answered Apr 24 '19 at 14:03

Vicente

2,304
11
15

3

depending of @user11124592's markdown and CSS you're solution is completely valid and not necessary "hacky" :) – Laura Apr 24 '19 at 15:57
4

@Vicente 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 })``` – Hudspeth Aug 26 '20 at 22:51
@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? – Ruan Duarte Dec 03 '20 at 01:18
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. – NickC Jun 15 '22 at 21:53

I Stand With Israel · Answer 3 · 2021-04-28T13:45:29.157

51

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

edited Apr 28 '21 at 13:45

answered Nov 23 '20 at 17:40

I Stand With Israel

1,971
16
30

Correction here - the menuPosition={'fixed'} should be menuPosition="fixed", with double quotes. – technik Apr 28 '21 at 12:59
1

Double quotes or single quotes both work. It's a style preference. – I Stand With Israel Apr 28 '21 at 13:45
save my day ! dude! thanks a lot! – hsuanyi-chou Jul 04 '23 at 03:19
Absolutely! Have a good one! – I Stand With Israel Jul 05 '23 at 12:47
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" – aero8991 Jul 26 '23 at 16:21

score 10 · Answer 4 · answered Apr 02 '21 at 11:56

10

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

answered Apr 02 '21 at 11:56

myuce

1,321
1
19
29

1

Adding yours "customStyles" only, works for me with "zIndex: 1000". But be careful with "Tooltips" or "Popovers" and add "zIndex" accordingly – michal Apr 06 '21 at 21:50
You can remove menuPosition={'fixed'} attribute. It prevents scrolling if menu list overflows page. – Ahmet Firat Keler May 25 '22 at 07:31

score 2 · Answer 5 · answered Jan 17 '21 at 14:32

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

score 2 · Answer 6 · answered May 05 '22 at 11:06

2

Just simply add the below two lines of code.

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

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

answered May 05 '22 at 11:06

RAHUL RAJ

91
4

score 1 · Answer 7 · answered Nov 30 '21 at 12:39

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

score 0 · Answer 8 · answered Nov 09 '22 at 22:56

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

score -5 · Answer 9 · answered Mar 05 '20 at 00:12

-5

Change the zIndex of the parent component of this select

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

answered Mar 05 '20 at 00:12

Hatem

285
1
8

How to change zIndex in react-select drowpdown

9 Answers9

Linked