[Select] Change popover position

• 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]

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

[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.