I've built a simple app with just a combobox and a card, designed to be embedded on a Wordpress site using NextJS and ShadCN ui components.
However, I'm facing an issue where the combobox only responds to keyboard input and not mouse clicks. Even when copying examples directly from the ShadCN ui website, it still doesn't work as expected.
I believe it's a minor problem that I'm overlooking, but I can't seem to pinpoint the exact cause.
Here is the code snippet:
'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'
// Combobox component definition
export function Combobox() {
// State variables
const [open, setOpen] = useState(false)
const [value, setValue] = useState('')
const [inputValue, setInputValue] = useState('')
const [currentItem, setCurrentItem] = useState<Batch | null>(null)
// Filter batches based on input value
const filteredBatches = batches.filter((batch) =>
batch.number.includes(inputValue)
)
// Handle click event on batch item
const handleClick = (batch: Batch) => {
console.log('clicked')
setCurrentItem(batch)
setOpen(false)
}
// Render JSX
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
You can view the deployed version to see that it works with keyboard here:
Find the code here: https://github.com/santivdt/ais-batch-numbers
Hopefully someone has a solution to this issue.