Dropdown under footer

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

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