MUI Popper：使用 disablePortal 时放置未按预期工作答案

【问题标题】：MUI Popper: Placement not working as intended when using disablePortalMUI Popper：使用 disablePortal 时放置未按预期工作
【发布时间】：2021-11-06 06:38:22
【问题描述】：

我有一个 Box，点击它后，我会打开一个包含一些输入的弹出器。我正在使用 ref 和 anchorEl 来定位 popper。在这种情况下一切正常。 Popper 在 ref 元素的默认底部位置打开。

但为了使用辅助功能和 tab through box 进行输入，我必须设置 disablePortal={true} 以便 Box 上的 Tab 将专注于相应 Popper 上的输入。但添加 disablePortal={true} 后，定位无法正常工作。我想使用默认底部，但它根本不尊重提供的位置。

初始化定位元素的ref

  const dropdownRef = useRef(null)

JSX 代码如下：

<Box onClick={showPopper} tabIndex={0}>
   <Box ref={dropdownRef}>
     Random Content 
   </Box>
      <Popper
        disablePortal={true}
        open={isActive}
        anchorEl={dropdownRef?.current ??  null}
        transition
        placement="bottom"
      >
        <Checkbox tabIndex={0} />
      </Popper>
</Box>

注意：我可以使用左侧和顶部等样式属性来调整位置。但这不是一个好方法，因为 Popper 也会根据可用的窗口空间调整其位置，所以这不是一个好主意。我希望该功能也能正常工作。

【问题讨论】：

我觉得可能是父Box的内容区域（高、宽）限制了Popper的定位。所以 Popper 试图将自己定位在有限的空间中，但在用户看来它好像与 Top 位置对齐。

标签： reactjs material-ui popper.js

【解决方案1】：

这是祖先的溢出设置，它的尺寸和Popper的内容的问题。

因此，如果某个祖先设置了任何溢出属性，并且无法将 Popper 内容调整到其中，那么 Popper 将不会定位为例外，因为它试图适应可用的尺寸。

解决方案：您可以使用名为 preventOverflow 的 Poppers 修饰符属性绕过父边界。代码如下：

<Popper
  disablePortal={true}
  open={isActive} 
  anchorEl={dropdownRef?.current ??  null}
  transition
  placement="bottom"
  modifiers={{
        preventOverflow: 
          {
              enabled: true, 
              escapeWithReference: true , 
              boundariesElement: 'viewport'}
         }
      }
    >

现在它将显示在层次结构中以方便访问、正确定位并调整到视口。

讨论：Positioning Popper issue when overflow is used

【讨论】：