React-select: Dropdown under footer

[Iliasvw]

Hello everybody

I'm currently facing an issue when using react-select.

As you can see, when I open the select, the dropdown is partly displayed under the footer. I have tried everything (z-index, overflow, position, ...).

The current style applied to react-select:

* {
    cursor: default !important;
    font-family: 'Open sans', sans-serif !important;
    outline: none !important;
  }

  .Select-control {
    background-color: ${({ theme }) => theme.colors.lightText};
    border-radius: 0.375rem;
    border: 0;
    box-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(0,0,0,0.3) inset;
    color: ${({ theme }) => theme.colors.accentHover};
    font-size: 0.8rem;
    font-weight: normal;
    height: 2.5rem;

    ${core.mediaQueries.medium`
      font-size: 0.9rem;
    `};
  }

  .is-open > .Select-control {
    background-color: ${({ theme }) => theme.colors.lightText};
  }

  .Select-control:hover {
    box-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(0,0,0,0.3) inset;
  }

  .Select-arrow-zone {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  .Select-control .Select-input:focus {
    outline: none;
    outline-offset: 0;
  }

  .Select-control .Select-value {
    height: 100%;
  }

  .Select-control .Select-value .Select-value-label {
    height: 100%;
  }

  .Select-control .Select-value > div > div {
    margin-left: 1.5rem;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    ${core.mediaQueries.medium`
      max-width: 95%;
      width: auto;
    `};
  }

  .Select-menu-outer > div > div > span {
    height: 0;
    margin: 0 1.5rem 0 0;
    width: 0;
  }

  .Select-menu-outer {
    max-height: 600px;
    overflow: hidden;

    ${core.mediaQueries.medium`
      max-height: 600px;
    `};

  }

  .Select-menu {
    max-height: 600px;
    overflow-y: visible !important;
  }

  .Select-menu-outer > div > div {
    font-size: 0.8rem;
    padding: 0.5rem 0;

    ${core.mediaQueries.medium`
      font-size: 0.9rem;
    `};

    &:last-child {
      margin-bottom: 2.5rem;
    }
  }

  .Select-menu-outer > div > div:hover {
    background-color: ${({ theme }) => theme.colors.lightText};
  }

  .is-focused:not(.is-open) > .Select-control, .is-focused.is-open > .Select-control {
    outline: none;
    outline-offset: 0;
  }

  .Select-noresults {
    margin-left: 1.5rem;
  }

When I change the z-index of the footer to -1, the dropdown is displayed good, but then the links in my footer aren't clickable...

Thanks in advance
Ilias

[Rall3n]

If you are using v2 of react-select, you can use the menuPortalTarget prop to render the dropdown into a parent container (e.g. body) of the footer.

<Select
    { ... }
    menuPortalTarget={document.querySelector('body')}
/>

CodeSandbox

[Iliasvw]

My package-lock.json says I'm using v1.
=> "react-select": "^1.0.0-rc.10"
Any fix for this version?
Can you easily upgrade?

[ebonow]

v1 is depreciated and no longer being worked but this should help you get up and running on the latest version:

https://react-select.com/upgrade-guide

[strap8]

const selectStyles = {
  container: (base, state) => ({
    ...base,
    zIndex: "999"
  })
};

<Select  styles={selectStyles} />

[ClementeSerrano]

Any update on this issue? Im having the same problem.

It would be great if the dropdown can render ABOVE of the selector, not below

[1nfility]

Solution for having a fixed dropdown menu, and keeping the width. (version 3.0.8)

constructor(props) {
    super(props);

    this.div = React.createRef();
  }

  render() {
    return (
      <div style={{ width: '100%' }} ref={this.div}>
        <ReactSelect
          styles={{
            menu: (base) => ({
              position: 'fixed',
              width: this.div.current.offsetWidth,
              zIndex: 500,
              ...base
            })
          }}
          placeholder={'Test select'}
          options={[{ value: 'test', label: 'Test' }]}
        />
      </div>
    );
  }

[itsmeganesh-cse-iiit]

Same issue here , I have tried above solutions, but issue still there

[flexdinesh]

Hey y'all! As @Rall3n mentioned, there are ways to customize the looks latest versions. If you're using v1, we recommend you to upgrade to v3 as v1 is not maintained anymore.

[flexdinesh]

If you're having this issue in v2 or later, pl follow the portalling instructions here — https://react-select.com/advanced#portaling

TLDR — you need these two additional props

menuPortalTarget={document.body}
styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}

[bladey]

Hi all,

In an effort to sustain the react-select project going forward, we're closing issues that appear to have been resolved via community comments or issues that are now redundant based on their age.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you, and we'll re-open it if necessary.