Popper.js中Popover内按钮悬停时出现焦点可见样式问题解析

问题现象分析

在使用Popper.js构建的Popover组件时，开发者可能会遇到一个特殊的交互问题：当用户首次加载页面后，直接悬停在Popover触发器上时，Popover内部的按钮会意外地显示焦点可见样式（:focus-visible）。这种样式通常只应在键盘导航时出现，而不应在鼠标悬停时显示。

问题本质

这个问题的根源在于浏览器对:focus-visible伪类的实现机制。浏览器在页面首次加载时，无法准确区分用户是通过键盘还是鼠标进行交互。因此，在以下特定场景会出现异常：

1. 页面首次加载后，用户直接使用鼠标悬停Popover触发器
2. Popover内部的按钮会自动获得焦点
3. 由于浏览器尚未检测到指针设备的使用，它会错误地应用:focus-visible样式

解决方案

方案一：控制初始焦点

通过FloatingFocusManager组件的initialFocus属性可以精确控制Popover打开时的焦点位置：

// 将初始焦点设置为Popover容器本身
<FloatingFocusManager initialFocus={refs.floating}>
  {/* Popover内容 */}
</FloatingFocusManager>

// 或者根据交互类型动态设置
<FloatingFocusManager initialFocus={isHoverOpen ? -1 : refs.floating}>
  {/* Popover内容 */}
</FloatingFocusManager>

同时需要为容器添加CSS样式：

.floating-element {
  outline: 0;
}

方案二：使用:focus-visiblepolyfill

由于浏览器原生实现存在缺陷，引入polyfill是更可靠的解决方案：

1. 安装focus-visiblepolyfill
2. 在应用中初始化polyfill
3. polyfill会通过JavaScript更智能地判断何时应该显示焦点样式

最佳实践建议

1. 一致性优先：确保Popover内所有可交互元素都有统一的焦点处理逻辑
2. 渐进增强：优先考虑键盘用户的体验，再处理鼠标交互的特殊情况
3. 测试覆盖：特别测试首次加载后的交互场景，确保不会出现意外样式

技术原理深入

浏览器对焦点状态的处理基于"输入模态"的概念。在页面首次加载时，浏览器无法确定用户是使用键盘还是鼠标，因此会保守地显示焦点样式。只有检测到明确的指针设备使用后，浏览器才会抑制:focus-visible的显示。

Popper.js作为定位引擎，本身不处理焦点逻辑，但与其他UI库配合使用时，开发者需要注意这种边缘情况。理解浏览器的工作原理有助于构建更健壮的交互组件。