Material UI - MultiSelect Popup Anchor 在选择上移动

Question

我在从 Material UI 4.2.0 升级到 4.9.10 时注意到了这一点，但通过故障排除，我相信这种行为始于 4.8.3 版

当使用带有 multiple 属性的 Select 时，弹出菜单会在选择第一项时移动。我还有其他示例，其中在选择多个项目时它移动了几次，但在我在这里提供的示例中，它似乎只是在选择第一个项目时发生。这是一个演示这一点的代码和框：https ://codesandbox.io/s/recursing-morse-2omxy?fontsize =14& hidenavigation =1& theme = dark

这是相同的代码示例，但使用的是 Material UI 4.8.2。当我从这个例子中选择项目时，菜单仍然锚定在它弹出时的位置：https : //codesandbox.io/s/recursing-frost-pxlds? fontsize =14& hidenavigation =1& theme =dark

我在这里的首选行为是第二​​个示例，其中菜单在我选择时不会在我身上跳来跳去。我查看了 API，并尝试指定不同的锚点，但到目前为止还无法阻止弹出菜单移动。有谁知道如何在 4.8.3 及更高版本中保持菜单不变？

Answer 1

@JoshSchmitton 的答案对我来说不起作用，因为 getContentAnchorEl 的类型是 Typescript((element: Element) => Element) | null | undefined但是，以下细微修改可以实现所需的结果：

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

谢谢乔什·施密顿

Answer 2

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 3

如果将其添加到“选择”中，则无论选择的项目数量有多少，它都会阻止下拉列表移动：

<Select MenuProps={{ autoFocus: true }} />