React Spectrum Combobox组件在Chrome最新版本中的搜索问题解析

问题现象

React Spectrum项目中的Combobox组件在Chrome浏览器最新版本(127.0.6533.119)中出现了一个交互问题：当用户将鼠标悬停在列表项上并尝试在输入框中搜索时，列表项会意外获得焦点，导致搜索功能中断。值得注意的是，这个问题在Chrome的旧版本(如125.0.6422.60)中并不存在，表现正常。

技术背景

Combobox是一种常见的UI控件，结合了输入框和下拉列表的功能，允许用户通过输入搜索或直接从列表中选择。React Spectrum作为Adobe开源的React组件库，提供了丰富的可访问性功能和跨浏览器兼容性支持。

问题根源分析

经过开发团队调查，问题出在useSelectableCollection钩子中的焦点管理逻辑。在最新版Chrome中，当Combobox的焦点状态发生变化时，浏览器对焦点处理的内部机制有所调整，导致以下行为：

1. 当用户悬停在列表项上时，组件内部会尝试管理焦点状态
2. 在最新版Chrome中，focusSafely方法会意外触发onBlur事件
3. 而在Safari和旧版Chrome中，同样的操作不会导致焦点丢失

解决方案实现

开发团队提供的修复方案修改了焦点管理逻辑，主要调整了useSelectableCollection.ts文件中的条件判断：

if (manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null) {
  if (!shouldUseVirtualFocus) {
    focusSafely(ref.current);
  } else {
    manager.setFocusedKey(delegate.getFirstKey());
  }
}

这一修改确保了在虚拟焦点模式下，组件会正确地将焦点设置到列表的第一个项目，而不是尝试直接聚焦DOM元素，从而避免了Chrome最新版本中的焦点冲突问题。

技术启示

这个案例展示了浏览器版本差异对前端组件行为的影响，特别是焦点管理这种与浏览器引擎紧密相关的功能。对于UI组件库开发者而言，需要注意：

1. 浏览器引擎更新可能改变原有的焦点处理机制
2. 虚拟焦点管理是解决跨浏览器兼容性问题的有效手段
3. 组件库需要持续跟踪主流浏览器的行为变化

React Spectrum团队已将该修复包含在最新的补丁版本中，用户更新后即可解决此问题。