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: #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

[mwmcode]

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 — #3263 (comment)

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

[debuurjongen]

I had a problem with a relative position of the Select component (fixed position was not an option), fixed it by creating a wrapper containing the status of open menu and updating the z-index based on state:

const selectStyles = {
    container: () => ({ 
      position: 'relative',
      minWidth: '100%',
      maxWidth: 'auto', 
    })
};

const SelectWrapper = () => {

  const [menuIsOpen, setMenuIsOpen] = useState(false);

  return(
    <Select 
      styles={selectStyles}
      onMenuOpen={() => setMenuIsOpen(!menuIsOpen)}
      onMenuClose={() => setMenuIsOpen(!menuIsOpen)}
      styles={{ ...selectStyles, container: () => ({ ...selectStyles.container, zIndex: menuIsOpen ? 999 : 1 })}}
    />
)}

[GodAlmighty990]

This solution worked for me.

const selectStyles = { menu: styles => ({ ...styles, zIndex: 999 }) };
I am creating an app with bootstrap react falcon theme using their wizardInputs and this worked for me. My wizardInput was bleeding through my react select menu. Hope this helps someone

[BagusJatikusuma]

This solution worked for me.

const selectStyles = { menu: styles => ({ ...styles, zIndex: 999 }) }; I am creating an app with bootstrap react falcon theme using their wizardInputs and this worked for me. My wizardInput was bleeding through my react select menu. Hope this helps someone

thank you. it works.

[AshwinNema]

@lounsbrough, this is worked for me:

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

It helped. Thanks

[Dalton-Klein]

@lounsbrough, this is worked for me:
v2.4.2 const selectStyles = { menu: styles => ({ ...styles, zIndex: 999 }) };

It helped. Thanks

This did not work for me. No change in behavior.

[GodAlmighty990]

@lounsbrough, this is worked for me:
v2.4.2 const selectStyles = { menu: styles => ({ ...styles, zIndex: 999 }) };

It helped. Thanks

This did not work for me. No change in behavior.

try this

const customStyles = {
menu: base => ({
...base,
// override border radius to match the box
borderRadius: 0,
// kill the gap
marginTop: 0,
zIndex: 999
}),
}

<Select
name="keyword"
required={true}
className="mb-3"
styles={customStyles}
components={animatedComponents}
closeMenuOnSelect={true}
options={keywords}
defaultValue={responder?.length ? responder[0]?.responder?.keyword?.map((el) => { return {title: el.title, _id: el._id}}): ""}
getOptionLabel={({title}) => title}
getOptionValue={({_id}) => _id}
onChange={(keyword) => setUpload({...upload, keyword: keyword === null ? [] : keyword})}
isMulti
placeholder="select Keywords"
isSearchable={true}
errors={errors}
innerRef={register({
required: "Add your Keyword"
})}
/>

[amal-octilus]

hey guys mine is indside a model from headlessui
none of the above worked for me

below is my select component and modal code

import Select from "react-select";

function SearchableSelect({
    name,
    options = [],
    className = "",
    isMulti = false,
    customStyles = "",
    ...props
}) {
    return (

    <Select
        className={`basic-single h-10 ${className}`}
        classNamePrefix="select"
        defaultValue={props?.defaultValue ?? isMulti ? "" : options[0]}
        isMulti={isMulti}
        isClearable={true}
        isSearchable={true}
        name={name}
        options={options}
        styles={customStyles}
        {...props}
    />
);

}

export default SearchableSelect;

<Modal show={showModal} className="!overflow-y-auto">
                    <form
                        onSubmit={submit}
                        className="space-y-5"
                        id={cellData?.id}
                    >
                        <div className="p-8">
                            <div className="grid grid-cols-1 gap-x-10 gap-y-5 md:grid-cols-2">
                                {modalContent == "editContent" &&
                                    editFormData?.map((d, i) => {
                                        return (
                                            <div key={i}>
                                                {!!d?.selectable && (
                                                    <BaseFormControl
                                                        name={d?.name}
                                                        label={d?.label}
                                                        placeholder={d?.label}
                                                        error={errors[d?.name]}
                                                        renderInput={({
                                                            type,
                                                            ...props
                                                        }) => (
                                                            <SearchableSelect
                                                                customStyles={
                                                                    customStyles
                                                                }
                                                                isMulti={true}
                                                                 options={
                                                                     d?.options
                                                                 }
                                                                {...props}
                                                            />
                                                        )}
                                                        onChange={(val) => {
                                                            setData(
                                                                d?.name,
                                                                val?.map(
                                                                    (d) =>
                                                                        d?.value
                                                                )
                                                            );
                                                        }}
                                                        onBlur={(e) =>
                                                            validate(
                                                                e,
                                                                d?.type,
                                                                d?.name,
                                                                clearErrors,
                                                                setError
                                                            )
                                                        }
                                                    />
                                                )}
                                            </div>
                                        );
                                    })}
                            </div>
                            <div className="flex justify-end gap-2 pt-[1.5rem]">
                                <button
                                    className="btn btn-primary"
                                    onClick={submit}
                                >
                                    Update
                                </button>

                                <button
                                    onClick={() => setShowModal(false)}
                                    type="button"
                                    className="btn"
                                >
                                    Close
                                </button>
                            </div>
                        </div>
                    </form>
                </Modal>

[AliBayatpour]

The same issue: none of the solutions worked, and react select shows over the popup...

[m-nathani]

This issue was still happening to me on

"react-select": "^5.8.0",

    <SelectTimeInput
      name="closesAt"
      placeholder="Close time"
      aria-label="close at time"
      ....
      // menuPortalTarget is needed to avoid dropdown getting overlapped by second dropdown
      // https://github.com/JedWatson/react-select/issues/1537
      menuPortalTarget={document.body}
    />

and solution for it was this: menuPortalTarget={document.body} .