悬停 MenuItem 元素后菜单位置不正确（Material-UI）

Question

悬停菜单项时，菜单容器的位置不应改变。

• [x] 该问题存在于最新版本中。如果您将 MUI 降级到 v4.5.0，请不要这样做 它的行为符合预期。

当前行为????

悬停 MenuItem 时，Menu 容器的位置会发生变化。

预期行为????

悬停 MenuItem 时，Menu 容器的位置不应改变。

复制步骤？？？？

步骤：

1. 打开https://codesandbox.io/s/magical-ritchie-9pxh2 (MUI 4.9.5)
2. 将鼠标悬停在第二个 ListItem 上，注意会出现一个文本。
3. 在菜单出现后单击第一个 MenuItem。 注意：如果您将 MaterialUI 降级到 4.5.0 它的行为与预期一样。 它在这里工作：https://codesandbox.io/s/purple-mountain-rzvbd（MUI 版本 4.5.0）

Answer 1

这很可能是由于这个 PR：https://github.com/mui-org/material-ui/pull/19046。

使用可见性隐藏作为锚点的元素（使其留在 DOM 中） - 这将确保您的菜单不会移动到错误的位置。

        <ListItemIcon
          style={{ visibility: hoveredItem ? "visible" : "hidden" }}
          onClick={e => {
            e.stopPropagation();
            onClickSideText(e);
          }}
        >

或者您可以根据菜单是否可见来隐藏/显示元素。在这种情况下，您必须在关闭菜单时设置 hoveredItem。

  const onMenuItemLeave = e => {
    if (!anchorElelement.anchorEl) {
      e.stopPropagation();
      setHoveredItem(null);
    }
  };

  const closeItemMenu = () => {
    setAnchorElelement({});
    setHoveredItem(null);
  };