Material UI - MultiSelect Popup Anchor Moving on Select

Question

I noticed this when upgrading from Material UI 4.2.0 to 4.9.10, but through troubleshooting, I believe this behavior started with version 4.8.3

When using a Select with the multiple attribute, the popup menu moves upon selection of the first item. I have other examples where it moved several times as multiple items are selected, but in the example I'm providing here, it seems to just happen when choosing the first item. Here's a codesandbox demonstrating this: https://codesandbox.io/s/recursing-morse-2omxy?fontsize=14&hidenavigation=1&theme=dark

Here's the same code sample, but using Material UI 4.8.2. When I choose items from this example, the menu remains anchored to where it was when it popped up: https://codesandbox.io/s/recursing-frost-pxlds?fontsize=14&hidenavigation=1&theme=dark

My preferred behavior here is the second example, where the menu doesn't jump around on me as I'm selecting. I've looked through the API, and have tried specifying different anchors, but so far have not been able to keep the popup menu from moving around. Does anyone know of how to keep the menu in place with version 4.8.3 and beyond?

Answer 1

Turns out that this is a Material UI bug that's targeted to be fixed in version 5. Here is a workaround until then:

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

Answer 2

@JoshSchmitton's answer did not work for me with Typescript as the type for getContentAnchorEl is ((element: Element) => Element) | null | undefined However the following slight modification achieves the desired result:

<Select
        MenuProps={{
            getContentAnchorEl: null,
        }} />

Thank you Josh Schmitton

Answer 3

You can create object:

const MenuProps = {
    getContentAnchorEl: null,
    PaperProps: {
        style: {
            maxHeight: 200,
            width: 300,
        },
    },
};

and then

<Select MenuProps={MenuProps}>

Answer 4

Try the following code, the result will be nearly the same with current version 5 material UI.

getContentAnchorEl to null is used to fix the drop-down's position.

And the rest of the props is used for move the drop-down lower but not overlap with the input field.

<Select
    MenuProps={{
        getContentAnchorEl: () => null,
        anchorOrigin: { vertical: 'bottom', horienter code herezontal: 'center' },
        transformOrigin: { vertical: 'top', horizontal: 'center' },
    }} />