diff --git a/apps/v4/registry/new-york-v4/examples/combobox-dropdown-menu.tsx b/apps/v4/registry/new-york-v4/examples/combobox-dropdown-menu.tsx index d2522a81c2b..2cb41b5926c 100644 --- a/apps/v4/registry/new-york-v4/examples/combobox-dropdown-menu.tsx +++ b/apps/v4/registry/new-york-v4/examples/combobox-dropdown-menu.tsx @@ -3,6 +3,7 @@ import * as React from "react" import { MoreHorizontal } from "lucide-react" + import { Button } from "@/registry/new-york-v4/ui/button" import { Command, @@ -38,7 +39,17 @@ const labels = [ export default function ComboboxDropdownMenu() { const [label, setLabel] = React.useState("feature") - const [open, setOpen] = React.useState(false) +const [open, setOpen] = React.useState(false) + // Autofocus fix for CommandInput inside DropdownMenu +const inputRef = React.useRef(null) + +React.useEffect(() => { + if (open && inputRef.current) { + setTimeout(() => { + inputRef.current?.focus() + }, 10) + } +}, [open]) return (
@@ -64,11 +75,11 @@ export default function ComboboxDropdownMenu() { Apply label - + No label found. diff --git a/apps/v4/registry/new-york-v4/examples/combobox-form.tsx b/apps/v4/registry/new-york-v4/examples/combobox-form.tsx index 288b51d5436..ec550fd4750 100644 --- a/apps/v4/registry/new-york-v4/examples/combobox-form.tsx +++ b/apps/v4/registry/new-york-v4/examples/combobox-form.tsx @@ -63,6 +63,18 @@ export default function ComboboxForm() { ), }) } + const [open, setOpen] = React.useState(false) + const inputRef = React.useRef(null) + + React.useEffect(() => { + if (open && inputRef.current) { + setTimeout(() => { + inputRef.current?.focus() + }, 10) + } + }, [open]) + + return (
@@ -73,7 +85,7 @@ export default function ComboboxForm() { render={({ field }) => ( Language - +