如何防止material-ui popover在打开时滚动iFrame？答案

【问题标题】：How to prevent material-ui popover from scrolling an iFrame on open?如何防止material-ui popover在打开时滚动iFrame？
【发布时间】：2022-10-05 01:32:05
【问题描述】：

我正在开发一个使用 MaterialUI 的应用程序，该应用程序使用 iFrame 嵌入到其他页面中。每当我们展示一个呈现为Popover 的组件（MUI select 和menu 组件都这样做）时，iFrame 会随着弹出框的打开滚动/跳转位置。

这是发生这种情况的示例。 https://erehd6.csb.app

发生在 Chrome 和 Firefox 中，但不是 Safari。

要重现，您需要将 iFrame 滚动到页面顶部。然后弹出的演示按钮会表现出这种行为，或者溢出菜单来访问站点外的代码源（github/stackblitz/copy JS source/copy TS source）：

<!doctype html>
<html lang="en">
    <body style="margin: 0;">
        <div style="height: 1000px;"></div>
        <iframe src="https://v4.mui.com/api/popover/" style="border: 0; width: 100vw; height: 100vh;"></iframe>
        <div style="height: 1000px;"></div>
    </body>
</html>

如何防止这种滚动/跳转发生？ Popper 组件没有同样的问题，但我不知道如何以不需要库分叉的方式用 Popper 替换 Popover（以及大量重新测试我们的应用程序） .顺便说一句，这发生在所有版本的 MUI 中，但我无法将当前站点放入 iFrame。

我尝试用Fade 替换Grow 的过渡组件，但这没有帮助。我仍在试图查明确切的问题，它在 positioning code for the Popover. 的某个地方

【问题讨论】：

快速推荐：提供一个 pastebin 链接（例如代码和框）以快速阅读您的实现并获得更快的反馈。
谢谢推荐，补充一下。

标签： reactjs material-ui popover

【解决方案1】：

将disableAutoFocus={true} 属性添加到任何Popover 或任何其他依赖Popover 的组件应该可以防止任何滚动异常。您可能还需要使用disableEnforceFocus，具体取决于您想要的行为。这些是来自Modal 组件的道具（其中Popover 是“孩子”）：https://mui.com/material-ui/api/modal/

我在 iframe 中使用 <Menu /> 时遇到了类似的问题，当打开它时，会导致浏览器滚动页面并专注于 iframe。对于这个<Menu />，我还必须在MenuListProps 中添加一个autoFocusItem: false 属性，所以这些对我来说是相关的道具：

<Menu
  MenuListProps={{
    autoFocusItem: false,
  }}
  disableAutoFocus
  /* other props */
>
  {/* MenuList components */}
</Menu>

【讨论】：

谢谢，这有效！在那之后，您对如何管理焦点状态/可访问性有任何提示吗？
抱歉，我们不必担心与此特定组件/用例相关的焦点状态/可访问性。我假设由于 Chrome 处理焦点的方式，以编程方式处理焦点会导致浏览器跳转。自发表评论以来，您在这方面有任何进展吗？

【解决方案2】：

添加到@mitt 所说的内容。为了允许可访问性和修复菜单跳转，除了 disableAutoFocus 和 autoFocusItem: false 之外，您还可以管理自己的焦点状态。

通过使用 ref，您可以控制输入的焦点。

const onFocus = () => {
    newRef?.current?.children[2].children[0].firstChild.focus();
};

<Menu
  MenuListProps={{
     autoFocusItem: false,
  }}
  disableAutoFocus
  ref={ref}
  TransitionProps={{
     onEntered: onFocus,
  }} 
  /* other props */
>
  {/* MenuList components */}
</Menu>

【讨论】：