ShadCN UI Combobox仅支持键盘操作，鼠标点击无效求助

基于NextJS和ShadCN UI开发的嵌入WordPress应用中，Combobox组件只能通过键盘选择选项，鼠标点击完全无响应——即使直接复制ShadCN官网的Combobox示例代码，问题依然存在。

相关代码 #

'use client'

import { ChevronsUpDown } from 'lucide-react'
import { Batch, batches } from '@/lib/batch'
import { Button } from '@/components/ui/button'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command'
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'
import { useState } from 'react'
import InfoCard from './info-card'

export function Combobox() {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState('')
  const [inputValue, setInputValue] = useState('')
  const [currentItem, setCurrentItem] = useState<Batch | null>(null)

  const filteredBatches = batches.filter((batch) =>
    batch.number.includes(inputValue)
  )

  const handleClick = (batch: Batch) => {
    console.log('clicked')
    setCurrentItem(batch)
    setOpen(false)
  }

  return (
    <>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            variant='outline'
            role='combobox'
            aria-expanded={open}
            className='w-[500px] justify-between'
          >
            {value
              ? batches.find((batch) => batch.number === value)?.number
              : 'Type your batch number...'}
            <ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
          </Button>
        </PopoverTrigger>
        <PopoverContent className='w-[500px] p-0'>
          <Command>
            <CommandInput
              placeholder='Search batch number...'
              value={inputValue}
              onValueChange={setInputValue}
            />
            <CommandEmpty>No batch found.</CommandEmpty>
            <CommandList>
              <CommandGroup>
                {filteredBatches.map((batch) => (
                  <CommandItem
                    key={batch.number}
                    value={batch.number}
                    onSelect={() => handleClick(batch)}
                    className='hover:cursor-pointer hover:bg-slate-400'
                  >
                    {batch.number} - {batch.fishery}
                  </CommandItem>
                ))}
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>

      <InfoCard batch={currentItem} />
    </>
  )
}

export default Combobox

解决方案 #

针对鼠标点击无响应的问题，可从以下几个方向修复：

1. 为CommandItem添加鼠标点击事件
   ShadCN的CommandItem组件的onSelect事件主要适配键盘交互（回车、上下箭头选择），鼠标点击不会触发该事件。需单独添加onClick事件处理鼠标操作：

// 先修改handleClick函数，添加事件参数阻止冒泡
const handleClick = (e: React.MouseEvent, batch: Batch) => {
  e.stopPropagation(); // 避免触发Popover的关闭逻辑
  console.log('clicked')
  setCurrentItem(batch)
  setOpen(false)
}

// 再为CommandItem添加onClick属性
<CommandItem
  key={batch.number}
  value={batch.number}
  onSelect={() => handleClick(new Event(''), batch)} // 兼容键盘操作
  onClick={(e) => handleClick(e, batch)} // 处理鼠标点击
  className='hover:cursor-pointer hover:bg-slate-400'
>
  {batch.number} - {batch.fishery}
</CommandItem>

2. 调整Popover的关闭行为
   若点击CommandItem时Popover提前关闭导致逻辑未执行，可通过stopPropagation阻止事件冒泡到Popover容器，确保handleClick完成状态更新后再关闭Popover。

3. 检查层级遮挡问题
   确认PopoverContent没有被其他元素遮挡，可手动设置z-index确保其处于顶层：

<PopoverContent className='w-[500px] p-0 z-50'>
  // ... 原有内容
</PopoverContent>

4. 更新组件版本
   确保NextJS与ShadCN UI版本兼容，尝试更新ShadCN组件到最新版本：

npx shadcn-ui@latest update

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