Question

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

在将Select与Multiple属性一起使用时，弹出菜单会在选择第一个项目时移动。我还有其他示例，它在选择了多个项目时移动了几次，但是在我提供的示例中，它似乎只是在选择第一个项目时发生。这是一个演示此代码的密码箱：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

事实证明，这是Material UI错误，目标是在版本5中修复。这是在此之前的解决方法：

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

Answer 2

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

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

Answer 3

@JoshSchmitton的答案对Typescript来说不起作用，因为getContentAnchoEl的类型为((element: Element) => Element) | null | undefined。但是，下面的一些修改实现了预期的结果：

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

谢谢约翰·史密顿

材质用户界面-在Select上移动的MultiSelect弹出锚点

3 个答案: