Select's dropdown menu covered by other components

[vlaux]

Describe the bug
In cases where the select's dropdown menu is shown over components with higher z-indexes, it can get hidden by this another component (see screenshot)

To Reproduce
Change the Single Select example
to

import NumericStepper from '../NumericStepper'

const options = [
  {
    value: 'first-option',
    label: 'First Option',
  },
  {
    value: 'second-option',
    label: 'Second Option',
  },
]

;<div>
  <Select
    label="Label"
    options={options}
    multi={false}
    onChange={values => {
      console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
    }}
  />
  <NumericStepper />
</div>

Expected behavior
Select's dropdown menu always on top.

Screenshots

Additional context
Question: why was the z-index = 1 and 2 needed for the NumericStepper?
Anyway, we probably agree that the menu portal should be always over any other component.

[estacioneto]

Nice issue, man!

Question: why was the z-index = 1 and 2 needed for the NumericStepper?

Incredible question and I really don't know why. Maybe we should look after the author.

Anyway, we probably agree that the menu portal should be always over any other component.

Maybe for most cases, but, for example, should not be over a modal component IMO.

[vlaux]

Maybe for most cases, but, for example, should not be over a modal component IMO.

Makes sense, but I'm talking only about the dropdown menu. So, if a Select is under a modal, it will be closed anyway (clicking outside the dropdown for opening a modal, for instance, would automatically close it).

[estacioneto]

Nice! I just thought the sentence was ambiguous because dropdowns that are outside the modal should not be over the overlay, of course. But I get your point :)