reactjsnext.jscomponentsshadcnui

Shadcn.ui popover element including commands in Next.Js 14: can't select/click the elements with the mouse


I'm trying to evaluate the ease of use the shadcn.ui component library. I'm trying to implement a popover component as this:

import { Button } from "@/components/ui/button";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { CalendarIcon, EnvelopeClosedIcon, FaceIcon, GearIcon, PersonIcon, RocketIcon } from "@radix-ui/react-icons";

export function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <Command className="rounded-lg border shadow-md">
          <CommandInput placeholder="Type a command or search..." />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Suggestions">
              <CommandItem>
                <CalendarIcon className="mr-2 h-4 w-4" />
                <span>Calendar</span>
              </CommandItem>
              <CommandItem>
                <FaceIcon className="mr-2 h-4 w-4" />
                <span>Search Emoji</span>
              </CommandItem>
              <CommandItem>
                <RocketIcon className="mr-2 h-4 w-4" />
                <span>Launch</span>
              </CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Settings">
              <CommandItem>
                <PersonIcon className="mr-2 h-4 w-4" />
                <span>Profile</span>
              </CommandItem>
              <CommandItem>
                <EnvelopeClosedIcon className="mr-2 h-4 w-4" />
                <span>Mail</span>
              </CommandItem>
              <CommandItem>
                <GearIcon className="mr-2 h-4 w-4" />
                <span>Settings</span>                
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

the main page:

import { PopoverDemo } from "@/components/PopoverDemo";

export default function Home() {
  return (
    <div>
      <PopoverDemo></PopoverDemo>
    </div>
  );
}

I'm trying to mimic the behavior that is on the "tasks" example seen on the Demo section. This is a mix between the Command component and the Popover component.

I'm able to open the popover. it is possible to select one command element with the keyboard, but I'm not able to select or click any of the components with the mouse. It feels like the command component is disabled

Popover with command elements

Am I missing something ? Thanks for your help


Solution

  • The Command Component from shadcn.ui is relying on the "cmdk" library. In the Github repository for Shacn.ui, the version for cmdk is 0.2.0, see the package.json file. When you first install the component, it will automatically install the cmdk version 1.0.0. This is breaking the component. I don't know if there is an ARIA option coming with version 1.0.0 that would allow to enable the command component inside another component