MUI Popper：启用disablePortal属性后定位不符合预期

我完全懂你遇到的困扰——为了实现Tab键能从Box直接聚焦到Popper内的输入控件，开启disablePortal={true}后，原本正常的placement属性完全失效，还不想放弃Popper自动适配窗口空间的智能定位功能对吧？

问题根源 #

当你开启disablePortal={true}时，Popper组件不再被挂载到<body>标签下（这是它默认的行为），而是直接插入到锚元素所在的DOM层级中。如果锚元素的父容器（也就是外层的<Box>）没有设置合适的定位属性，Popper的定位参考系会混乱，导致placement设置完全不起作用，同时也会影响它自动调整位置的能力。

解决方案 #

下面是几个能完美解决这个问题的步骤，既保留无障碍特性，又不丢失Popper的核心定位功能：

1. 给锚元素的父容器设置相对定位

Popper的定位逻辑依赖于锚元素的上下文，给外层的<Box>添加position: relative，能让Popper正确以锚元素为参考点进行定位：

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

2. 配置Popper的Modifiers强化定位逻辑

有时候仅设置相对定位可能还不够稳定，可以通过自定义modifiers来确保自动翻转位置、防止溢出这些核心功能正常工作：

const popperModifiers = [
  {
    name: 'flip',
    enabled: true, // 强制开启自动位置调整，当底部空间不足时自动切换到顶部
  },
  {
    name: 'preventOverflow',
    options: {
      boundary: 'viewport', // 基于视口判断是否溢出
    },
  },
  {
    name: 'offset',
    options: {
      offset: [0, 8], // 保持和默认Popper一样的锚元素间距
    },
  },
];

// 在Popper组件中应用这些modifiers
<Popper
  disablePortal={true}
  open={isActive}
  anchorEl={dropdownRef.current}
  transition
  placement="bottom"
  modifiers={popperModifiers}
>
  <Checkbox tabIndex={0} />
</Popper>

3. 优化无障碍体验的小细节

开启disablePortal已经解决了Tab聚焦的问题，但可以再补充焦点自动切换的逻辑，让无障碍体验更完善：

const checkboxRef = useRef(null);

// 当Popper打开/关闭时自动切换焦点
useEffect(() => {
  if (isActive && checkboxRef.current) {
    checkboxRef.current.focus();
  } else if (!isActive && dropdownRef.current) {
    dropdownRef.current.focus();
  }
}, [isActive]);

// 给Checkbox绑定ref
<Checkbox tabIndex={0} ref={checkboxRef} />

效果验证 #

完成以上设置后，你会发现Popper不仅能按照placement="bottom"的要求正常显示，还会在窗口底部空间不足时自动调整到顶部，同时Tab键可以流畅地在Box和Popper内的控件之间切换，完全不需要手动设置left/top这类硬编码的样式。

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