Material-ui: [Select] Moves when re-rendering or selecting multiple items

[efkan]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When selecting multiple items -that are below of the select control vertically- on a select control, the list scrolls up at every single select.

it can be reviewed on the following its documentation page:
https://material-ui.com/components/selects/#multiple-select

Expected Behavior 🤔

It was already working as expected at previous versions:
https://v4-7-2.material-ui.com/components/selects/#multiple-select

[oliviertassinari]

Interesting, this sounds like another compelling reason to consolidate the positioning logic on the Popper component.

[PierreAndreis]

As noted in https://github.com/mui-org/material-ui/issues/19353#issuecomment-577336939

After some investigation, this is the code that it is setting the ref to use in positioning the Menu component
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Menu/Menu.js#L118-L130

It doesn't take into consideration that there could be multiples items selected and allows a race condition to take place, using the last one as the reference and shifting the menu position while the menu is open.
In my opinion, I think the menu should never reposition itself when open. Only right before opening.

I don't believe it is Popper, but the ref that has been given to Popper. Fixing the logic to get the ref in the Menu should fix this.
I think we should only calculate the ref to use when opening and never calculate while open to avoid these bad experiences where the menu shifts in front of the user.

[Alaa-Ben]

Hi !
Any news on this ?

[goffioul]

Is there a chance to see a (quick) fix for this regression in 4.x branch? From PR #19809 and #19838, I understand a different implementation will be used for 5.x, but that leaves current users of 4.x a bit dead in the water with a broken component.

[goffioul]

Just answering myself. It's possible to disable the jumpy behavior by using MenuProps={{variant:'menu'}} on the Select component. It's not great, because then the selected element(s) will not come into view when the menu pops up, but from a UX perspective, it's better than having the popup jumping all around while you make your selection.

[Alaa-Ben]

MenuProps={{variant:'menu'}} is not working for me unfortunately :'(

[hothands-schneider]

Status of this? This is crippling some of our work. Please bump

[wesleyody]

For me it's only working when I set MenuProps={{variant: "menu"}} and not define a maxHeight prop style

[timbilalov]

MenuProps={{variant: "menu"}} works for me. Thanks!
But we all (i guess) also waiting for a more common fix for this bug :)

[oliviertassinari]

A temporary workaround:

        <Select
          MenuProps={{
            getContentAnchorEl: () => null,
          }}

[hothands-schneider]

@oliviertassinari That is a working fix for us! Thanks

[lnm8910]

A temporary workaround:

        <Select
          MenuProps={{
            getContentAnchorEl: () => null,
          }}

This is a good fix. Worked fine for me.

[KristijanJovanovski]

A temporary workaround:

        <Select
          MenuProps={{
            getContentAnchorEl: () => null,
          }}

Unfortunately this doesn't work for us.

[jpcmf]

Any fix?

[lnm8910]

Any fix?

This is what I did for the fix.

MenuProps={{
getContentAnchorEl: () => null,
}}

[Jhonatangiraldo]

Hey @oliviertassinari is there any plan to fix this bug? Or is it planned to be fixed in the next release?. btw thank you for your work and support :)