Shadcn中Sheet内Popover的Command Input无法输入问题

排查Sheet的Focus Trap干扰 #

Shadcn的Sheet默认启用焦点陷阱（focus trap），会把焦点限制在Sheet内部。如果你的Popover是通过Portal挂载到body上的，焦点陷阱会干扰输入框获取焦点：

• 临时禁用Sheet的焦点陷阱，仅在Popover打开时生效：

  <Sheet disableFocusTrap={isPopoverOpen}>
    {/* 页面内容 */}
    <MultiSelect />
  </Sheet>
  

• 或者关闭Popover的Portal挂载，让它留在Sheet的DOM结构内：

  <Popover portal={false}>
    {/* Command组件内容 */}
  </Popover>
  

修复事件冒泡与层级冲突 #

即便加了pointer-events-auto，父元素的事件拦截或层级问题仍可能导致输入异常：

• 给Popover内容容器设置更高的z-index，确保它完全覆盖Sheet内的其他元素：

  .popover-content {
    z-index: 10000; /* 高于Sheet默认的9999层级 */
    pointer-events: auto !important;
  }
  

• 给Command Input添加事件阻止冒泡，避免Sheet的事件监听干扰输入：

  <Command.Input
    onMouseDown={(e) => e.stopPropagation()}
    onKeyDown={(e) => e.stopPropagation()}
    placeholder="搜索选项..."
  />
  

检查输入框状态绑定 #

确认Command Input的value和onChange已正确绑定，避免状态更新异常导致无法输入：

const [searchText, setSearchText] = useState('');

<Command.Input
  value={searchText}
  onChange={(e) => setSearchText(e.target.value)}
  placeholder="搜索选项..."
/>

解决Sheet点击事件穿透 #

Sheet的容器可能存在事件监听，导致输入框下方区域触发其他按钮：

• 给Sheet内容容器设置pointer-events: none，再给内部需要交互的元素单独开启：

  .sheet-content {
    pointer-events: none;
  }
  .sheet-content > * {
    pointer-events: auto;
  }
  

内容的提问来源于stack exchange，提问作者Saumya Rai