解决Floating UI中自动聚焦导致页面滚动到顶部的问题

在使用Floating UI库创建浮动元素时，开发者可能会遇到一个常见问题：当浮动元素中包含带有autoFocus属性的输入框时，页面会自动滚动到顶部。这种现象不仅影响用户体验，也破坏了浮动元素的预期行为。

问题根源分析

这个问题的根本原因在于浏览器的工作机制。当React渲染带有autoFocus属性的输入元素时，浏览器会立即尝试聚焦该元素。然而，此时浮动元素可能尚未完成定位过程，其初始位置通常位于窗口的左上角（坐标0,0处）。因此，浏览器会将视图滚动到这个位置，导致页面跳转到顶部。

解决方案：使用FloatingFocusManager

Floating UI提供了专门的FloatingFocusManager组件来优雅地处理焦点管理问题。这个组件能够确保在浮动元素完全定位后才进行焦点设置，从而避免页面意外滚动。

实现步骤

1. 首先从Floating UI中导入必要的组件：

import { FloatingFocusManager } from '@floating-ui/react';

2. 在浮动元素的包装层使用FloatingFocusManager：

{open && (
  <FloatingFocusManager context={context} modal={false}>
    <div
      ref={refs.setFloating}
      style={{ ...floatingStyles }}
      {...getFloatingProps()}
    >
      <input placeholder="搜索内容" />
    </div>
  </FloatingFocusManager>
)}

关键注意事项

• 不再需要使用autoFocus属性，FloatingFocusManager会自动处理焦点管理
• context参数必须传递，它包含了Floating UI所需的上下文信息
• modal属性设置为false表示非模态对话框行为

最佳实践建议

1. 在Floating UI项目中，应避免直接使用autoFocus属性
2. 对于复杂的浮动元素交互，考虑结合使用useFocus等交互钩子
3. 测试时特别注意在不同滚动位置下的行为表现
4. 对于表单场景，可以结合useListNavigation实现更流畅的键盘导航体验

通过使用Floating UI提供的焦点管理工具，开发者可以创建出行为更加稳定、用户体验更佳的浮动界面元素，有效避免页面意外滚动等问题。