Positioning an options menu in MUI TextField select

Question

I am using a MUI TextField component with a select prop, and do not manage to position the options menu below the input field (the menu covers the input field when open). This happens in MUI's own sandbox as well:

https://codesandbox.io/s/9oqjs?file=/demo.js:1442-1496

In the sandbox, in all of the examples to the left, the menu covers the input field. It doesn't happen in the examples to the right, as these use the native select html tag, but this comes at the price of using the browser's menu.

Any idea how to position the menu correctly without the native select?

Many thanks!

Answer 1

It looks like Position of <MenuItems> under the Material-ui <Select> component can answer your question.

I also found that if the list of MenuItems is too long to fit under the TextField, the Menu will expand vertically over the TextField to accommodate the list. Adding a max-height to the menu can fix that.

  <TextField
    ...
    select={true}

    SelectProps={{
      MenuProps: {
        sx: { maxHeight: '50%' }
      }
    }}
  >