MenuList with simplebar-react and menuPlacement="auto" never uses placement="top"

[GP-marco]

Bug:
react-select@v4.3.1 with simplebar-react@2.3.5 and menuPlacement="auto" is always positioning menu to "bottom".

When using react-select in combination with simplebar-react the functionality of menuPlacement="auto" is lost and it always falls back to menuPlacement="bottom".

For some reason the MenuPlacer is not correctly determining the placement when used in combination with simplebar-react.

Test case: https://codesandbox.io/s/suspicious-rumple-ni52n

How to reproduce: Make the browser window small enough and open the dropdowns.
The dropdown with placeholder "Select without Simplebar" will render the menu above. (correct)
The dropdown with placeholder "Select with Simplebar" will render the menu below (wrong)

[ebonow]

@GP-marco I will be compiling a list of various issues with our current Menu positioning, styling, and scrolling and will pull this into the list of known issues.

[HIT2022]

Anyone ever figure out a solution to this?

[nodir-sulaymonov]

@ebonow Were you able to solve this problem? I also use simplebar-react in a project and my menuPlacement is always bottom too.

[Rall3n]

simplebar-react initializes far later then our Select component calculates the placement. When opening the menu, the list has an initial height of 0px with a overall padding of 8px. It's not until simplebar-react has initialized that the list gains actual height. But as already stated that is far too late for our placement deduction.

But you can negate that problem by adding styles targeting simplebar-react elements:

<Select
  styles={{
    menu: (provided) => ({
      ...provided,
      '[data-simplebar]:not([data-simplebar="init"])': {
        '.simplebar-mask, .simplebar-offset': {
          position: 'relative'
        }
      }
    })
  }}
/>

This ensures that the list renders with the needed height to properly calculate the placement.