shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
69.36k stars 4.13k forks source link

[bug]: Command component key event don't work #3504

Open o0vO opened 5 months ago

o0vO commented 5 months ago

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

  1. Copy the basic example at doc
  2. Choose a hover card to trigger the command show event.
  3. 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
OmarAljoundi commented 4 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>
  )
}