ui
ui copied to clipboard
[bug]: Command component key event don't work
Describe the bug
The Command key (arrow down/up) event don't work if don't put it in CommandDialog when component use groups.
Affected component/components
Command, ComboBox
How to reproduce
- Copy the basic example at doc
- Choose a hover card to trigger the command show event.
- press key up or down to see that.
Codesandbox/StackBlitz link
https://codesandbox.io/p/devbox/shadcn-ui-s9x785?file=%2Fapp%2Fpage.tsx%3A24%2C11
Logs
No response
System Info
"dependencies": {
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-hover-card": "^1.0.7",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"cmdk": "^0.2.1",
"lucide-react": "^0.368.0",
"next": "14.2.1",
"react": "^18",
"react-dom": "^18",
"tailwind-merge": "^2.2.2",
"tailwindcss-animate": "^1.0.7"
}
### Before submitting
- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues
Hi @o0vO
I found a workaround where you set a ref for the input to make it focus once it renders.
'use client'
import { Button } from '@/components/ui/button'
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
CommandShortcut,
} from '@/components/ui/command'
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from '@/components/ui/hover-card'
import { useCallback, useRef, useState } from 'react'
export default function MyList() {
const [open, setOpen] = useState(false)
const onRefChange = useCallback((ref: any | null) => {
if (ref) ref.focus()
}, [])
return (
<HoverCard open={open} onOpenChange={setOpen}>
<HoverCardTrigger asChild>
<Button>Hover me</Button>
</HoverCardTrigger>
<HoverCardContent className="w-80">
<Command>
<CommandInput
ref={onRefChange}
placeholder="Type a command or search..."
/>
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem>
<span>Calendar</span>
</CommandItem>
<CommandItem>
<span>Search Emoji</span>
</CommandItem>
<CommandItem>
<span>Launch</span>
</CommandItem>
</CommandGroup>
<CommandSeparator />
<CommandGroup heading="Settings">
<CommandItem>
<span>Profile</span>
<CommandShortcut>⌘P</CommandShortcut>
</CommandItem>
<CommandItem>
<span>Mail</span>
<CommandShortcut>⌘B</CommandShortcut>
</CommandItem>
<CommandItem>
<span>Settings</span>
<CommandShortcut>⌘S</CommandShortcut>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</HoverCardContent>
</HoverCard>
)
}