Style menu based on menuPlacement when it is set to auto

[erdbom]

This is similar to #4872, I don't think it was ever answered fully. I have my menuPlacement set to auto, but I want to add styles to either the top or bottom of the menu depending on which side of the select it is rendered on. Is there a way to determine if the menu will render on top or bottom when menuPlacement is set to auto?

[manjushsh]

Hi @erdbom, yes we can detect it using combination of menuPlacement or state.selectProps.menuPlacement and placement props. as shown in image below.

👉🏼 Code Sandbox link

Example code:

menu: (provided, state) => ({
    ...provided,
    ...(state.selectProps.menuPlacement === "auto"
      ? state?.placement === "top"
        ? { outline: "2px solid red" }
        : { outline: "2px solid green" }
      : {})
  }),

[erdbom]

Perfect, thank you!