CMDK 项目中无输入框时的键盘导航解决方案

背景与问题

在构建基于 CMDK 的选择组件（如 Select/MultiSelect）时，开发者常遇到一个典型问题：当移除输入框（Input 组件）后，键盘导航功能（如方向键控制选项）会完全失效。这是因为 CMDK 的焦点管理机制默认依赖输入框作为交互入口。

核心原理

CMDK 的键盘导航功能依赖于 #cmdk-root 或其内部元素获取焦点。当输入框不存在时，需要手动将焦点转移到命令容器（<Command />）或内部元素上，才能重新激活键盘控制能力。

解决方案

方案一：直接为 Command 组件添加可聚焦属性

通过为 <Command /> 组件设置 tabIndex={0}，使其可被聚焦，同时用 CSS 隐藏默认焦点样式：

<Command 
  tabIndex={0}
  className="outline-none" // 隐藏焦点轮廓
>
  {/* 子组件 */}
</Command>

优势：

• 实现简单，无需额外依赖
• 符合无障碍标准（通过 tabIndex 显式声明可聚焦）

方案二：结合 Radix Popover 的自动聚焦特性

若使用 Radix UI 的 Popover 组件包裹 CMDK，可通过以下方式利用其自动聚焦行为：

1. 为 Popover.Content 添加 asChild 属性
2. 确保 Popover 内容区域包含可聚焦元素

<Popover>
  <Popover.Trigger>打开</Popover.Trigger>
  <Popover.Content asChild>
    <Command>
      {/* 子组件 */}
    </Command>
  </Popover.Content>
</Popover>

实现机制：
Radix 的 Popover 在打开时会自动将焦点转移到内容区域，asChild 属性允许内容容器继承焦点行为。

技术细节补充

焦点管理策略

• CMDK 默认行为：输入框作为首要焦点目标，触发后建立命令列表的键盘响应链路
• 无输入框场景：需通过编程方式将焦点转移到命令树的根节点或有效子节点

无障碍注意事项

1. 当隐藏焦点轮廓时（如 outline-none），需确保存在其他视觉反馈（如背景色变化）
2. 对于屏幕阅读器用户，建议添加 aria-label 描述命令功能

最佳实践建议

1. 优先保留输入框：在搜索型场景中，输入框能提供更好的用户体验
2. 选择性隐藏输入框：可通过 CSS 隐藏输入框但保留其 DOM 结构（如 opacity: 0 + position: absolute）
3. 组合式解决方案：在复杂交互中，可结合 useEffect 动态管理焦点

useEffect(() => {
  const root = document.getElementById('cmdk-root');
  root?.focus();
}, [isOpen]);

通过理解 CMDK 的焦点控制机制，开发者可以灵活适配各种无输入框场景，同时保持完整的键盘导航体验。