显示工具提示时更改页面的焦点顺序

Question

我目前正在开发一个自定义工具提示/弹出框组件。它的工作方式基本上是一个自定义的 React-Popper 包装一个 Trigger 元素。当用户将注意力集中在触发器上时，工具提示将打开。当它们模糊时，它就会关闭。

问题是，工具提示是在 DOM 结构的顶层生成的。它不附加到 Trigger 元素，而是在根级别创建为 div。这显然会扰乱焦点顺序，因为它将工具提示内容放在焦点队列的末尾。

我可以控制工具提示内容，因为我知道它将始终具有相同的结构（一些操作按钮和关闭按钮）。

只要工具提示可见，我就设法在第一个按钮上强制按下.focus()

。然而，这并不能解决我的问题，因为

它实际上跳过了页面上的所有其他可聚焦元素（我无法控制）。 我需要的是

一种改变焦点顺序的方法，使工具提示内容与触发器组件处于相同的“级别”

，这样它们将彼此相邻聚焦，然后恢复显示下一个元素的序列在页面上。 我唯一发现的是

这个类似的问题

，答案绝对为零。

Answer 1

https://stackblitz.com/edit/stackblitz-starters-ibqwmn?file=src%2FApp.js

您可以在其中查看我解决问题的方法。

解决方案说明：

一旦工具提示为
1. blurred

   ，您就会找到下一个可聚焦元素（在大文档的情况下不是最佳性能）。我相信您可以尝试并进一步优化它。

您强制聚焦它并隐藏工具提示。
2. 注意

   在这一点上：由于我无法强制react集中元素，所以我使用了此处接受的答案如何关注react中动态添加的输入字段

const handleTooltipBlur = () => {
    if (triggerRef && triggerRef.current) {
      const nextFocusableElement = findNextFocusableElement(triggerRef.current); // Implementation can be seen in the stackblitz link
      if (nextFocusableElement) {
        console.log('Next focusable element:', nextFocusableElement);
        setTimeout(() => {
          nextFocusableElement.focus();
        }, 200);
        setTooltipVisible(false);
      }
    }
  };