[Popover] Does not reposition when updated

[veronicaerick]

How can I fix the position of a dropdown menu when used with a multi select when the input display of selected chips grows to x number of rows to the bottom of the input container?

I would like the dropdown menu to always show below the input underline regardless of number of selections. When in a default state with no selections, using MenuProps with the select and setting anchorOrigin + transformOrigin along with setting getContentAnchorEl to null per the docs works very well. The issue occurs when I add more than 2 options to the selected list thats displayed in the input: the menu is statically set at the initial anchor position and doesn't allow for users to view the input/selected chips as the input grows in height as more and more options are selected/shown in the input.

How can I enable the menu to stay attached to the intended position at the bottom of the input when its more than one line in height?

Here is a demonstration of the effect https://codesandbox.io/s/material-demo-yr3en?fontsize=14&hidenavigation=1&theme=dark

Example:

[oliviertassinari]

@veronicaerick This thread sounds like the Popover variant of the Popper discussion in #18310.
It also sounds related to #18136.

[oliviertassinari]

I would like the dropdown menu to always show below the input underline regardless of number of selections.

The solution is in #18136 (comment).

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

[veronicaerick]

Hey thanks for the response.. I have that exact configuration in the codesandbox (https://codesandbox.io/s/material-demo-yr3en?fontsize=14&hidenavigation=1&theme=dark) - the issue is when more than one row of selections is present, the above doesn't work and results in

[oliviertassinari]

Same as #18310.

[oliviertassinari]

I'm closing as a duplicate of #10595.