JedWatson / JedWatson/react-select

Z-Index doesn't seem to be configurable

Open
#5,329 11 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

Thanks for using react-select!

If you are going to ask a question or want to propose a change or a new feature, then please don't file an issue for this.
Questions and feature requests have their own place in our discussions section.

Are you reporting a bug or runtime error?

A bug. No matter what I try, looking back at the examples nor at the previous issue queue, I cannot affect z-index whatsoever.

Screen Shot 2022-09-02 at 3 29 48 PM

Code is fairly standard:

const modelSelector = [
  { value: 'Ferrari 812 GTS', label: 'Ferrari 812 GTS' },
  { value: 'Ferrari 296 GTB', label: 'Ferrari 296 GTB' },
  { value: 'Ferrari 296 GTS', label: 'Ferrari 296 GTS' },
]

const ModelSelector = () => (
  <Select options={modelSelector} placeholder="Model" />
)

I've tried all sorts of style stuff, like this:

const customStyles = {
  option: (provided: any, state: any) => ({
    ...provided,
    zIndex: 999,
  }),
  control: () => ({
    zIndex: 999,
  }),
  singleValue: (provided: any, state: any) => {
    const opacity = state.isDisabled ? 0.5 : 1
    const transition = 'opacity 300ms'

    return { ...provided, opacity, transition, zIndex: 99999 }
  },
}

No luck.

This is in a React Native Web application, if that makes any difference.

How do I get z-index to work? If I put the z-index of everythingI want underneath the dropdown to -1 it works, but that's obviously not a great solution

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the shown Select and customStyles example in a React Native Web application, then inspect the dropdown's rendered stacking behavior. Done means the dropdown can appear above the surrounding content with the documented style configuration; no source files or tests are named in the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, react-native, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.