Open o0vO opened 5 months ago
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>
)
}
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
Codesandbox/StackBlitz link
https://codesandbox.io/p/devbox/shadcn-ui-s9x785?file=%2Fapp%2Fpage.tsx%3A24%2C11
Logs
No response
System Info