The command is disabled by default and its never selectable. Please replace the command with this code. I replace the data-[disabled] to data-[disabled=true]; this is the working code and please update the command with this. Thanks
"use client";
import * as React from "react";
import { type DialogProps } from "@radix-ui/react-dialog";
import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
import { Command as CommandPrimitive } from "cmdk";
import { cn } from "@/lib/utils";
import { Dialog, DialogContent } from "@/components/ui/dialog";
Describe the bug
The command is disabled by default and its never selectable. Please replace the command with this code. I replace the data-[disabled] to data-[disabled=true]; this is the working code and please update the command with this. Thanks
"use client";
import * as React from "react"; import { type DialogProps } from "@radix-ui/react-dialog"; import { MagnifyingGlassIcon } from "@radix-ui/react-icons"; import { Command as CommandPrimitive } from "cmdk";
import { cn } from "@/lib/utils"; import { Dialog, DialogContent } from "@/components/ui/dialog";
const Command = React.forwardRef< React.ElementRef,
React.ComponentPropsWithoutRef
interface CommandDialogProps extends DialogProps {}
const CommandDialog = ({ children, ...props }: CommandDialogProps) => { return ( <Dialog {...props}>
); };
const CommandInput = React.forwardRef< React.ElementRef,
React.ComponentPropsWithoutRef
CommandInput.displayName = CommandPrimitive.Input.displayName;
const CommandList = React.forwardRef< React.ElementRef,
React.ComponentPropsWithoutRef
CommandList.displayName = CommandPrimitive.List.displayName;
const CommandEmpty = React.forwardRef< React.ElementRef,
React.ComponentPropsWithoutRef
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
const CommandGroup = React.forwardRef< React.ElementRef,
React.ComponentPropsWithoutRef
CommandGroup.displayName = CommandPrimitive.Group.displayName;
const CommandSeparator = React.forwardRef< React.ElementRef,
React.ComponentPropsWithoutRef
const CommandItem = React.forwardRef< React.ElementRef,
React.ComponentPropsWithoutRef
CommandItem.displayName = CommandPrimitive.Item.displayName;
const CommandShortcut = ({ className, ...props }: React.HTMLAttributes) => {
return (
<span
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
className
)}
{...props}
/>
);
};
CommandShortcut.displayName = "CommandShortcut";
export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
Affected component/components
Command, and Combobox.
How to reproduce
Simply use it anywhere.
Codesandbox/StackBlitz link
i dont have time. Please just test it out yourself.
Logs
System Info
Before submitting