Positioning of <MenuItems> under the Material-ui <Select> component

Question

By design, clicking on a material-ui <Select> component (or alternatively a <TextField select> component), causes the menu items to appear in a position which covers the originating Select/TextField element.

<Select ...>   <MenuItem value={10}>Ten</MenuItem>   <MenuItem value={20}>Twenty</MenuItem>   <MenuItem value={30}>Thirty</MenuItem> </Select> 

Is it possible to override this positioning (whether with JSS or with a new composition) such that the menu items align themselves directly under the originating Select/TextField element?

Any guidance would be appreciated. Thank you.

Answer 1

Use MenuProps attribute of Select element

     <Select             MenuProps={{               anchorOrigin: {                 vertical: "bottom",                 horizontal: "left"               },               transformOrigin: {                 vertical: "top",                 horizontal: "left"               },               getContentAnchorEl: null             }}      >       <MenuItem value={10}>Ten</MenuItem>       <MenuItem value={20}>Twenty</MenuItem>       <MenuItem value={30}>Thirty</MenuItem>     </Select> 

Answer 2

Mui v5 :

The position of <MenuItems> is default under the Material-ui <Select> in Mui v5.

If want to change position, code sample :

Mui v4 :

1. Use <Select> and set menu items position:

        <Select           ...           MenuProps={{             anchorOrigin: {               vertical: "bottom",               horizontal: "left"             },             getContentAnchorEl: null           }}         > 

2. Use <TextField select> and set menu items positon:

      <TextField         ...         select={true}         SelectProps={{           MenuProps: {             anchorOrigin: {               vertical: "bottom",               horizontal: "left"             },             getContentAnchorEl: null           }         }}       > 

Code Sample :

Hope to help you !