小编BMc*_*McV的帖子

我一直在一个项目中使用@headlessui/react，它帮助我提高了工作效率！但我发现一个问题，其中一个组件会干扰另一个组件。我想我已经找到了问题的一般范围，并且可以提供复制品，但我想知道：

1. 具体为什么会发生这种情况？
2. 哪些解决方案可以作为解决方法或在headlessui/react库本身中修复此行为？

问题

Popover在组件内使用该组件时Tab.Panel，Popover.Panel行为不正确。根据文档：

当面板打开时，单击其内容之外的任意位置、按 Esc 键或按 Tab 键离开面板将关闭弹出窗口。

但是，当Popover位于Tab组件（docs）内时，行为会不一致。对我来说，在 Chrome 中，单击会Popover.Panel关闭面板，除非单击的是 a button，而在 Safari 中，面板在所有情况下都会关闭。不过，通过键盘聚焦按钮可以进行选择。

再生产

我在codesandbox中创建了该问题的简化版本

我认为这与从Tab捕获 的组件有关，该组件又关闭.focusPopover.PanelPopover.Panel

我将“控制台记录焦点元素发生变化”中的这段代码添加到复制中，并且单击后Tab.Panel似乎有：focusPopover.Panel

document.addEventListener(
  "focusin",
  function () {
    console.log("focused: ", document.activeElement);
  },
  true
);

任何人都可以解释正在发生的事情并提供简单补救措施的建议吗？