[Select] Change popover position

[w3nda]

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I want to disable the way the select displays the popover, with the selected item being on the select, popover moving weird, just want to disable it, and position the menu under the select permanently.
I've been through Select's files, couldn't find it. if you can walk me through, I'll do it myself and make a PR.

Current Behavior

The popover is moving according to the selected item and there is no disable option / reposition option.

Examples

I want the menu to be under the select.

Context

[oliviertassinari]

@w3nda Following the documentation:

• The Menu component is built on top of the Popover:
  
• The Popover can be positioned as you are expecting:
  
• Combining these two informations and fixing a warning, we can came up with:

        <Menu
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left"
          }}
          getContentAnchorEl={null}

https://codesandbox.io/s/9l17k3qnk4

I hope that help.

[oliviertassinari]

Oh, it's with the Select, let's go one step deeper:

• The Select is using the Menu:
  
• ♻️

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

https://codesandbox.io/s/18l2042y97

[w3nda]

King!
I've found that if the Menu has enough space under it, it will render perfectly, but if he won't have space on screen Menu will be pushed up. true? or broken behavior?

[oliviertassinari]

I've found that if the Menu has enough space under it, it will render perfectly, but if he won't have space on screen Menu will be pushed up.

@wenduzer This sounds like the expected behavior.

[Shrikant9]

Oh, it's with the Select, let's go one step deeper:

@oliviertassinari Thanks, this is exactly what I have been searching for past 2 hours.

[oliviertassinari]

@Shrikant9 How can we improve the discoverability of the answer?

[Shrikant9]

How can we improve the discoverability of the answer?

@oliviertassinari In my opinion, having more diverse versions of demos on the demo page of <Select /> component. Although honestly, I've recently started using material-ui so still need to get used to the docs.

[oliviertassinari]

@Shrikant9 We would be happy to accept a pull request 👍.

[itairov]

@oliviertassinari thank you my friend, you helped me very very very much. I know material ui well enough, but I couldn’t come to this decision

[oliviertassinari]

We will likely change the default position with #18493.

[itairov]

make default it would be very good

[Tasin5541]

Oh, it's with the Select, let's go one step deeper:

• The Select is using the Menu:
  
• ♻️

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

https://codesandbox.io/s/18l2042y97

How can we do this when using Textfield for Select? it doesn't accept the menuprops

[oliviertassinari]

@Tasin5541 You can use <TextField SelectProps={}>.

[aleksander351]

@oliviertassinari
The example is not working with bottom positioned select elements. The menu covers the select.