如何阻止React MUI Menu组件点击时滚动条回到顶部？

出现这种滚动回顶的情况，通常是焦点管理异常或者点击事件触发了默认滚动行为导致的，你可以通过以下两种方式解决：

方案一：修正ARIA属性关联 #

你的Menu组件中设置了MenuListProps={{ 'aria-labelledby': 'long-button' }}，但触发菜单的IconButton并没有对应的id="long-button"，这种不匹配会导致屏幕阅读器的焦点逻辑出错，进而触发页面滚动。

修改IconButton，补上对应的id即可：

<IconButton
    id="long-button" // 新增此id，与Menu的aria-labelledby对应
    aria-label="more"
    aria-controls={open ? 'long-menu' : null}
    aria-expanded={open ? 'true' : null}
    aria-haspopup="true"
    onClick={handleClick}
  >
    <MoreVertIcon style={{ fontSize: '27px', color: 'black' }} />
  </IconButton>

方案二：在点击事件中阻止默认行为 #

如果方案一无效，可能是点击事件触发了浏览器的默认滚动行为，你可以在handleClick函数中阻止默认行为和事件冒泡：

const handleClick = (e) => {
  e.preventDefault(); // 阻止浏览器默认行为
  e.stopPropagation(); // 阻止事件冒泡
  setOpen(!open); // 原有的菜单切换逻辑
};

这两种方法都能有效禁用滚动回顶的行为，优先推荐方案一，因为它符合无障碍访问的规范，同时解决根源问题。

内容的提问来源于stack exchange，提问作者ferakp