在Elastic EUI项目中实现EuiContextMenu自定义焦点控制

背景介绍

在Elastic EUI项目(v88.5.4版本)中，EuiContextMenu组件是一个常用的导航菜单控件，它支持多级嵌套面板。开发者在使用过程中发现了一个关于焦点控制的特殊需求：当菜单面板中包含输入字段时，如何实现输入框自动获取焦点，而不是默认被面板标题抢占焦点。

问题分析

EuiContextMenu组件默认会将焦点自动设置在面板标题上，这是为了符合无障碍访问的最佳实践，确保键盘用户可以立即开始导航。然而，在某些业务场景下，开发者需要在最深层嵌套的面板中直接聚焦到输入字段，以提升用户体验。

现有解决方案

目前社区中提供了两种临时解决方案：

1. 延迟聚焦法：使用setTimeout延迟执行focus操作，让组件完成默认的焦点设置后再手动调整焦点

<EuiFieldText
  inputRef={(el) => {
    if (el) setTimeout(() => el.focus(), 300);
  }}
/>

2. 焦点事件监听法：通过监听文档的focusin事件，在检测到面板标题获得焦点后立即将焦点转移到输入框

useEffect(() => {
  const handleFocusIn = () => {
    if (document.activeElement?.className == "euiContextMenuPanelTitle") {
      inputRef.current?.focus();
      document.removeEventListener("focusin", handleFocusIn);
    }
  };
  document.addEventListener("focusin", handleFocusIn);
}, []);

技术实现原理

这两种方法本质上都是在与组件的默认焦点管理机制"竞争"。EuiContextMenu内部使用了React的useEffect或useLayoutEffect来设置初始焦点，而我们的解决方案需要在组件完成渲染和默认焦点设置后，再通过JavaScript手动调整焦点位置。

未来改进方向

Elastic EUI团队已经注意到这个需求，并计划引入initialFocusedItemIndex={-1}属性来提供更优雅的解决方案。这个属性将允许开发者完全禁用组件的默认焦点设置行为，从而可以自由地控制焦点位置。

最佳实践建议

1. 在大多数情况下，建议保留默认的焦点行为，因为它优化了键盘导航体验
2. 只有在确实需要直接聚焦到表单元素时，才考虑使用上述解决方案
3. 实现自定义焦点控制时，务必考虑无障碍访问需求，确保键盘用户仍然可以正常操作
4. 关注EUI的版本更新，未来可以直接使用官方提供的解决方案

总结

在Elastic EUI项目中处理EuiContextMenu的焦点控制需要理解组件的默认行为和工作原理。虽然目前需要通过一些技巧来实现自定义焦点，但团队已经计划提供更完善的API支持。开发者应该根据具体业务需求选择合适的解决方案，同时保持对无障碍访问的重视。