Can i know the menu placement open when i set menuPlacement="auto"

[zaherkassem]

is there any props that tell me where is the menuPlacement top or bottom. ? can we add a className on the top dev like menuPlacement-top or menuPlacement-bottom for each option. ?

[csandman]

The prop placement (which can be either top or bottom) gets passed into the Menu component, so there are a few ways you can use that. If you could give an example of what you're specifically trying to do with it I could probably give you a more complete answer but here are some possibilities.

First, you can use the placement prop in a custom wrapper for the Menu component to add a class to the component:

const selectComponents = {
  Menu: (props) => (
    <chakraComponents.Menu
      className={`menuPlacement-${props.placement}`}
      {...props}
    />
  ),
};

const App = () => (
  <Select
    menuPlacement="auto"
    className="chakra-react-select"
    classNamePrefix="chakra-react-select"
    components={selectComponents}
  />
);

This might be what you want, but the class won't be available at the top level, only at the Menu level.

Another place you could access the placement prop is inside the chakraStyles object for the menu:

const App = () => {
  return (
    <Select
      chakraStyles={{
        menu: (provided, selectProps) => {
          console.log(selectProps.placement);
  
          return provided;
        },
      }}
    />
  );
};

If neither of these help with what you're trying to do, then give me more specifics and I can try and help further.

Here's a CodeSandbox example including both: https://codesandbox.io/s/epcms4?file=/app.tsx