React-select: Dropdown is getting overlapped by second react-select.

[Jaikant]

Hey guys, I have now been struggling for a few hours. I am having two react-select components.
The dropdown from the component on top is getting overlapped by the below component.

I added a z-index of 999 to .Select-menu-outer, but it doesn't change anything.
I have attached a screenshot of the issue.

[evgeniiteterin]

anyone solved this problem? menuContainerStyle={{ zIndex: 5 }} not work.

[turnerniles]

See prateekjahead's comment: https://github.com/JedWatson/react-select/issues/1010
"HubSpot's react-select-plus takes in dropdownComponent as a prop which solves the issue."

[MaxInMoon]

By the way, zIndex doesn't has any effect on position: static elements

[mcha-dev]

this worked for me

.Select-menu {
    position: fixed !important;
}

then I had to give fixed width to both the input and the dropdown, here is the css I changed:

.Select {
    width: 444px !important;
    margin-right: 5px;
    z-index: 0 !important;
}

.Select.is-open {
    z-index: 1 !important;
}

.Select-menu {
    position: fixed !important;
    width: 440px !important;
    margin: 1px;
}

[brianarpie]

v1.2.1

.Select.is-open {
    z-index: 1000 !important;
}

worked for me

[lounsbrough]

Any update on getting this resolved?

[d3mp]

@lounsbrough, this is worked for me:

v2.4.2
const selectStyles = { menu: styles => ({ ...styles, zIndex: 999 }) };

[lounsbrough]

@d3mp, yes, we implemented something like this and it's working in our environment.

Thanks.

[juliankigwana]

@d3mp is right. You need to target the element that has the absolute style, which is the menu.

[benkindt]

@d3mp thanks, this works! Use it like:

const selectStyles = { menu: styles => ({ ...styles, zIndex: 999 }) };
<Select styles={selectStyles} />

[Luke-Markham]

@d3mp thanks, this works! Use it like:

const selectStyles = { menu: styles => ({ ...styles, zIndex: 999 }) };
<Select styles={selectStyles} />

worked for me

[simonkaspersen]

This issue was made in 2017, and still is a issue?
None of the solutions above works. The dropdown menu is hidden behind other components. CSS, selectstyles og portal-component was not successful.

[Jonny-B]

Same here. Menu is still falling behind.

[flexdinesh]

@simonkaspersen @Jonny-B which version of react-select are you using?

Would you be able to create a codesandbox that replicates the behaviour? Would be easier to help if there's a code example in a codesandbox.

Also, you can try portalling as suggested here — https://github.com/JedWatson/react-select/issues/3263#issuecomment-445809701

[simonkaspersen]

@flexdinesh Have tried with the 3 last versions.

Will try. I am currently writing away some of the react-select-boxes

[simonkaspersen]

So I needed a combination of:

menuPortalTarget={document.querySelector('body')}

and:

const selectStyles = {
    menuPortal: base => ({ ...base, zIndex: 9999 }),
    menu: provided => ({ ...provided, zIndex: "9999 !important" })
};

<Select 
    styles={selectStyles}
/>

[jossmac]

Default behaviour is correct, please see this CodeSandbox.

[MenachemICTBIT]

After seeing the half dozen related issues, yet not finding a resolution, I have 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.

[jperestrelo]

Thanks @MenachemICTBIT I Was struggling with the same without finding any satisfactory solution, this worked like a charm!

[MenachemICTBIT]

@jperestrelo Glad to hear it. I really struggled with this one as well.

The next problem then becomes that, since the menu is position:fixed, if you need to scroll the page the menu won't scroll with you. I managed a slight hack where I added an event listener that closes the menu when you scroll outside the menu itself (allowing scrolling inside the menu).