Skip to content

fix: CommandDialog not closing on ESC #608

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
pasqualevitiello wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

fix: CommandDialog not closing on ESC #608

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a6a5442
fix CommandDialog not closing on ESC
pasqualevitiello Dec 19, 2025
9a12843
refactor: command component improvements
pasqualevitiello Dec 20, 2025
f17fd1c
chore: remove console log from command demo
pasqualevitiello Dec 20, 2025
95ec50f
Merge remote-tracking branch 'origin/main' into pasquale/cui-100-fix-…
pasqualevitiello Dec 20, 2025
6f4ba49
refactor: update Command and Menu components to use <kbd> for shortcu…
pasqualevitiello Dec 20, 2025
04ac29e
style: fix formatting in globals.css by removing unnecessary whitespace
pasqualevitiello Dec 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 10 additions & 14 deletions apps/ui/components/command-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
Search01Icon,
} from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import type { ComponentProps } from "react";
import * as React from "react";
import { useConfig } from "@/hooks/use-config";
Expand Down Expand Up @@ -53,7 +53,6 @@ export function CommandMenu({
tree: typeof source.pageTree;
navItems?: { href: string; label: string }[];
}) {
const router = useRouter();
const isMac = useIsMac();
const [config] = useConfig();
const { copyToClipboard } = useCopyToClipboard();
Expand Down Expand Up @@ -142,14 +141,6 @@ export function CommandMenu({
[packageManager],
);

const handleItemClick = React.useCallback(
(item: PageItem) => {
setOpen(false);
router.push(item.url);
},
[router],
);

React.useEffect(() => {
const down = (e: KeyboardEvent) => {
if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || e.key === "/") {
Expand Down Expand Up @@ -206,9 +197,14 @@ export function CommandMenu({
<CommandCollection>
{(item: PageItem) => (
<CommandItem
className="flex w-full items-center"
key={item.value}
onClick={() => handleItemClick(item)}
value={item.value}
render={
<Link
href={item.url}
onNavigate={() => setOpen(false)}
/>
}
>
<HugeiconsIcon
className="mr-2 h-4 w-4 opacity-80"
Expand All @@ -225,13 +221,13 @@ export function CommandMenu({
</CommandPanel>
<CommandFooter>
<div className="flex items-center gap-2">
<span>Go to Page</span>
<span className="whitespace-nowrap">Go to Page</span>
<Kbd>
<HugeiconsIcon icon={ArrowTurnBackwardIcon} strokeWidth={2} />
</Kbd>
</div>
{copyPayload && (
<div className="flex items-center gap-2">
<div className="flex min-w-0 items-center gap-2">
<span className="truncate font-mono">{copyPayload}</span>
<KbdGroup>
<Kbd>{isMac ? "⌘" : "Ctrl"}</Kbd>
Expand Down
2 changes: 1 addition & 1 deletion apps/ui/public/r/command.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"files": [
{
"path": "registry/default/ui/command.tsx",
"content": "\"use client\";\n\nimport { Dialog as CommandDialogPrimitive } from \"@base-ui/react/dialog\";\nimport { SearchIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n Autocomplete,\n AutocompleteCollection,\n AutocompleteEmpty,\n AutocompleteGroup,\n AutocompleteGroupLabel,\n AutocompleteInput,\n AutocompleteItem,\n AutocompleteList,\n AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst CommandInputContext = React.createContext<{\n inputRef: React.RefObject<HTMLInputElement | null> | null;\n}>({\n inputRef: null,\n});\n\nconst CommandDialog = CommandDialogPrimitive.Root;\n\nconst CommandDialogPortal = CommandDialogPrimitive.Portal;\n\nfunction CommandDialogTrigger(props: CommandDialogPrimitive.Trigger.Props) {\n return (\n <CommandDialogPrimitive.Trigger\n data-slot=\"command-dialog-trigger\"\n {...props}\n />\n );\n}\n\nfunction CommandDialogBackdrop({\n className,\n ...props\n}: CommandDialogPrimitive.Backdrop.Props) {\n return (\n <CommandDialogPrimitive.Backdrop\n className={cn(\n \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n className,\n )}\n data-slot=\"command-dialog-backdrop\"\n {...props}\n />\n );\n}\n\nfunction CommandDialogViewport({\n className,\n ...props\n}: CommandDialogPrimitive.Viewport.Props) {\n return (\n <CommandDialogPrimitive.Viewport\n className={cn(\n \"fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]\",\n className,\n )}\n data-slot=\"command-dialog-viewport\"\n {...props}\n />\n );\n}\n\nfunction CommandDialogPopup({\n className,\n children,\n ...props\n}: CommandDialogPrimitive.Popup.Props) {\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n return (\n <CommandDialogPortal>\n <CommandDialogBackdrop />\n <CommandDialogViewport>\n <CommandDialogPrimitive.Popup\n className={cn(\n \"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-100 min-h-0 w-full min-w-0 max-w-xl scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/50 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]\",\n className,\n )}\n data-slot=\"command-dialog-popup\"\n initialFocus={inputRef}\n {...props}\n >\n <CommandInputContext.Provider value={{ inputRef }}>\n {children}\n </CommandInputContext.Provider>\n </CommandDialogPrimitive.Popup>\n </CommandDialogViewport>\n </CommandDialogPortal>\n );\n}\n\nfunction Command({\n autoHighlight = \"always\",\n keepHighlight = true,\n open = true,\n ...props\n}: React.ComponentProps<typeof Autocomplete>) {\n return (\n <Autocomplete\n autoHighlight={autoHighlight}\n keepHighlight={keepHighlight}\n open={open}\n {...props}\n />\n );\n}\n\nfunction CommandInput({\n className,\n placeholder = undefined,\n ...props\n}: React.ComponentProps<typeof AutocompleteInput>) {\n const { inputRef } = React.useContext(CommandInputContext);\n\n return (\n <div className=\"px-2.5 py-1.5\">\n <AutocompleteInput\n className={cn(\n \"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0\",\n className,\n )}\n placeholder={placeholder}\n ref={inputRef}\n size=\"lg\"\n startAddon={<SearchIcon />}\n {...props}\n />\n </div>\n );\n}\n\nfunction CommandList({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteList>) {\n return (\n <AutocompleteList\n className={cn(\"not-empty:scroll-py-2 not-empty:p-2\", className)}\n data-slot=\"command-list\"\n {...props}\n />\n );\n}\n\nfunction CommandEmpty({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteEmpty>) {\n return (\n <AutocompleteEmpty\n className={cn(\"not-empty:py-6\", className)}\n data-slot=\"command-empty\"\n {...props}\n />\n );\n}\n\nfunction CommandPanel({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n className=\"-mx-px relative min-h-0 rounded-t-xl border bg-popover bg-clip-padding shadow-xs [clip-path:inset(0_1px)] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]\"\n {...props}\n />\n );\n}\n\nfunction CommandGroup({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteGroup>) {\n return (\n <AutocompleteGroup\n className={className}\n data-slot=\"command-group\"\n {...props}\n />\n );\n}\n\nfunction CommandGroupLabel({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteGroupLabel>) {\n return (\n <AutocompleteGroupLabel\n className={className}\n data-slot=\"command-group-label\"\n {...props}\n />\n );\n}\n\nfunction CommandCollection({\n ...props\n}: React.ComponentProps<typeof AutocompleteCollection>) {\n return <AutocompleteCollection data-slot=\"command-collection\" {...props} />;\n}\n\nfunction CommandItem({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteItem>) {\n return (\n <AutocompleteItem\n className={cn(\"py-1.5\", className)}\n data-slot=\"command-item\"\n {...props}\n />\n );\n}\n\nfunction CommandSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteSeparator>) {\n return (\n <AutocompleteSeparator\n className={cn(\"my-2\", className)}\n data-slot=\"command-separator\"\n {...props}\n />\n );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"kbd\">) {\n return (\n <span\n className={cn(\n \"ms-auto font-medium text-muted-foreground/72 text-xs tracking-widest\",\n className,\n )}\n data-slot=\"command-shortcut\"\n {...props}\n />\n );\n}\n\nfunction CommandFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n className={cn(\n \"flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] px-5 py-3 text-muted-foreground text-xs\",\n className,\n )}\n data-slot=\"command-footer\"\n {...props}\n />\n );\n}\n\nexport {\n Command,\n CommandCollection,\n CommandDialog,\n CommandDialogPopup,\n CommandDialogTrigger,\n CommandEmpty,\n CommandFooter,\n CommandGroup,\n CommandGroupLabel,\n CommandInput,\n CommandItem,\n CommandList,\n CommandPanel,\n CommandSeparator,\n CommandShortcut,\n};\n",
"content": "\"use client\";\n\nimport { Dialog as CommandDialogPrimitive } from \"@base-ui/react/dialog\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n Autocomplete,\n AutocompleteCollection,\n AutocompleteEmpty,\n AutocompleteGroup,\n AutocompleteGroupLabel,\n AutocompleteInput,\n AutocompleteItem,\n AutocompleteList,\n AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\nconst CommandDialog = CommandDialogPrimitive.Root;\n\nconst CommandDialogPortal = CommandDialogPrimitive.Portal;\n\nfunction CommandDialogTrigger(props: CommandDialogPrimitive.Trigger.Props) {\n return (\n <CommandDialogPrimitive.Trigger\n data-slot=\"command-dialog-trigger\"\n {...props}\n />\n );\n}\n\nfunction CommandDialogBackdrop({\n className,\n ...props\n}: CommandDialogPrimitive.Backdrop.Props) {\n return (\n <CommandDialogPrimitive.Backdrop\n className={cn(\n \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n className,\n )}\n data-slot=\"command-dialog-backdrop\"\n {...props}\n />\n );\n}\n\nfunction CommandDialogViewport({\n className,\n ...props\n}: CommandDialogPrimitive.Viewport.Props) {\n return (\n <CommandDialogPrimitive.Viewport\n className={cn(\n \"fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]\",\n className,\n )}\n data-slot=\"command-dialog-viewport\"\n {...props}\n />\n );\n}\n\nfunction CommandDialogPopup({\n className,\n children,\n ...props\n}: CommandDialogPrimitive.Popup.Props) {\n return (\n <CommandDialogPortal>\n <CommandDialogBackdrop />\n <CommandDialogViewport>\n <CommandDialogPrimitive.Popup\n className={cn(\n \"-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-100 min-h-0 w-full min-w-0 max-w-xl scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/50 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]\",\n className,\n )}\n data-slot=\"command-dialog-popup\"\n {...props}\n >\n {children}\n </CommandDialogPrimitive.Popup>\n </CommandDialogViewport>\n </CommandDialogPortal>\n );\n}\n\nfunction Command({\n autoHighlight = \"always\",\n keepHighlight = true,\n ...props\n}: React.ComponentProps<typeof Autocomplete>) {\n return (\n <Autocomplete\n autoHighlight={autoHighlight}\n inline\n keepHighlight={keepHighlight}\n open\n {...props}\n />\n );\n}\n\nfunction CommandInput({\n className,\n placeholder = undefined,\n ...props\n}: React.ComponentProps<typeof AutocompleteInput>) {\n return (\n <div className=\"px-2.5 py-1.5\">\n <AutocompleteInput\n autoFocus\n className={cn(\n \"border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0\",\n className,\n )}\n placeholder={placeholder}\n size=\"lg\"\n startAddon={<SearchIcon />}\n {...props}\n />\n </div>\n );\n}\n\nfunction CommandList({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteList>) {\n return (\n <AutocompleteList\n className={cn(\"not-empty:scroll-py-2 not-empty:p-2\", className)}\n data-slot=\"command-list\"\n {...props}\n />\n );\n}\n\nfunction CommandEmpty({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteEmpty>) {\n return (\n <AutocompleteEmpty\n className={cn(\"not-empty:py-6\", className)}\n data-slot=\"command-empty\"\n {...props}\n />\n );\n}\n\nfunction CommandPanel({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n className=\"-mx-px relative min-h-0 rounded-t-xl border bg-popover bg-clip-padding shadow-xs [clip-path:inset(0_1px)] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]\"\n {...props}\n />\n );\n}\n\nfunction CommandGroup({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteGroup>) {\n return (\n <AutocompleteGroup\n className={className}\n data-slot=\"command-group\"\n {...props}\n />\n );\n}\n\nfunction CommandGroupLabel({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteGroupLabel>) {\n return (\n <AutocompleteGroupLabel\n className={className}\n data-slot=\"command-group-label\"\n {...props}\n />\n );\n}\n\nfunction CommandCollection({\n ...props\n}: React.ComponentProps<typeof AutocompleteCollection>) {\n return <AutocompleteCollection data-slot=\"command-collection\" {...props} />;\n}\n\nfunction CommandItem({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteItem>) {\n return (\n <AutocompleteItem\n className={cn(\"py-1.5\", className)}\n data-slot=\"command-item\"\n {...props}\n />\n );\n}\n\nfunction CommandSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof AutocompleteSeparator>) {\n return (\n <AutocompleteSeparator\n className={cn(\"my-2\", className)}\n data-slot=\"command-separator\"\n {...props}\n />\n );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<\"kbd\">) {\n return (\n <kbd\n className={cn(\n \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest\",\n className,\n )}\n data-slot=\"command-shortcut\"\n {...props}\n />\n );\n}\n\nfunction CommandFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n className={cn(\n \"flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] px-5 py-3 text-muted-foreground text-xs\",\n className,\n )}\n data-slot=\"command-footer\"\n {...props}\n />\n );\n}\n\nexport {\n Command,\n CommandCollection,\n CommandDialog,\n CommandDialogPopup,\n CommandDialogTrigger,\n CommandEmpty,\n CommandFooter,\n CommandGroup,\n CommandGroupLabel,\n CommandInput,\n CommandItem,\n CommandList,\n CommandPanel,\n CommandSeparator,\n CommandShortcut,\n};\n",
"type": "registry:ui"
}
]
Expand Down
Loading
Loading