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 ..
2
Answers
Your element has the following utility class:
data-[disabled]:pointer-events-none
. The meaning of this selector is that it takes effect when thedata-disabled
attribute is present on the element.And the element has the
data-disabled
value by default. Although the value is false, the fact thatdata-disabled
exists is still satisfied.If you want it to take effect when the
data-disabled
value istrue
, change your utility class to the following form:data-[disabled=true]:pointer-events-none
.You have to replace data-disabled to data-[disabled =’true’] from the command.tsx (the command component).
This might be helpful: https://github.com/shadcn-ui/ui/issues/2944#issuecomment-1985153126