react-financial-charts图表上Chakra UI下拉菜单出现偏移如何解决

问题根本原因 #

Chakra UI 的 Menu 组件底层依赖 Popper.js 计算下拉菜单（MenuList）的坐标，默认以全局视口作为定位参考基准。当 Menu 被放在 SVG 的 foreignObject 内部时，Popper 无法正确识别 SVG 元素、foreignObject 自带的坐标偏移，也不会把页面上图表前方的其他元素高度纳入计算，最终导致下拉菜单定位错位，出现间隙。

彻底解决方法 #

通过锁定 Menu 的定位上下文到 foreignObject 内部即可修复，修改后代码如下：

function TestMenu() {
  return (
    <g className="react-financial-charts-enable-interaction">
      <foreignObject
        x={30}
        y={30}
        width={"100%"}
        height={"100%"}
        {/* 必须将overflow设为visible，避免下拉菜单超出foreignObject范围被裁剪 */}
        style={{ overflow: "visible" }}
      >
        {/* 新增相对定位容器，作为Menu组件的定位上下文 */}
        <div style={{ position: "relative", width: "fit-content" }}>
          <Menu 
            {/* 强制下拉菜单基于父级相对定位元素计算位置，不使用全局视口作为参考基准 */}
            strategy="absolute"
            {/* 关闭自动翻转、多余偏移修正，避免额外计算导致的错位 */}
            flip={false}
            offset={[0, 0]}
          >
            <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
              Actions
            </MenuButton>
            <MenuList>
              <MenuItem>Download</MenuItem>
              <MenuItem>Create a Copy</MenuItem>
              <MenuItem>Mark as Draft</MenuItem>
              <MenuItem>Delete</MenuItem>
              <MenuItem>Attend a Workshop</MenuItem>
            </MenuList>
          </Menu>
        </div>
      </foreignObject>
    </g>
  );
}

补充说明 #

如果不需要用 foreignObject 的 x/y 属性定位，也可以删除这两个属性，把边距设置到内部的相对定位 div 上，效果完全一致，不会受图表前方其他元素的高度影响。

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