ShadCN UI combobox only working with keyboard not with mouse

Question

I have a very simple app that consists of only a combobox and a card (it is going to be embedded on a Wordpress). NextJS, ShadCN ui.

The combobox for some reason only works with keyboard, not with the mouse. Even if I copy the examples directly from ShadCN ui website it does not work.

I am sure it is something easy but I cant figure it out.

Here is my code:

'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

I have it deployed here so you can see that it works with keyboard: https://aisbatchnumbers.vercel.app/

Code is here: https://github.com/santivdt/ais-batch-numbers

Hopefully someone knows the solution ..

Answer 1

Your element has the following utility class: data-[disabled]:pointer-events-none. The meaning of this selector is that it takes effect when the data-disabled attribute is present on the element.

And the element has the data-disabled value by default. Although the value is false, the fact that data-disabled exists is still satisfied.

If you want it to take effect when the data-disabled value is true, change your utility class to the following form: data-[disabled=true]:pointer-events-none.