为什么在Popover.Panel中单击会在Tab.Panel内关闭面板

Question

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

1. 为什么会发生这种情况
2. 有什么解决方案可以作为变通方法或在headlessui/react库本身中修复这种行为

问题

当在Tab.Panel组件中使用Popover组件时，Popover.Panel的行为不正确。根据文件：

当面板打开时，单击其内容之外的任何位置、按Escape键或从中跳出来将关闭Popover。

但是，当Popover位于Tab组件(文档)内时，行为不一致。对我来说，在Chrome中，在Popover.Panel中单击会关闭面板，除非单击是在button上，而在Safari中，面板在任何情况下都会关闭。不过，用键盘聚焦按钮可以进行选择。

复制

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

我认为这与Tab组件从Popover.Panel捕获focus有关，后者反过来关闭Popover.Panel。

我从"；控制台记录聚焦元素的变化"；点击Popover.Panel:后，Tab.Panel似乎具有focus

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

有人能解释一下发生了什么，并对简单的补救措施提出建议吗？

Answer 1

我现在可以回答为什么会发生这种情况，并提供一个可能的解决方案。

我可以稍微简化一下我的案子。每当Popover在可聚焦元件(Tab.Panel在)内部时，就会发生这种情况。我认为在PopoverRoot中，只要activeElement在组之外，面板就会关闭。

如果Popover在具有tabindex="0"的元素内，则该元素将是activeElement，并且面板将关闭。我更新了codesandbox复制，在不使用Tab的情况下演示了这一点，并提出了一个解决方案，但我不确定这是否是一个合适的解决方案。

解决方法似乎只是将tabIndex="0"添加到Popover.Panel中，使其成为activeElement。是否有不应该这样做的原因，或者可能导致其他意外行为？