fix(combobox): ensure CommandInput autofocus works inside DropdownMenu (#8942)

[devel-maverick]

Fixes: #8942

Problem

When a Combobox is placed inside a DropdownMenu, the CommandInput does not autofocus when the submenu opens.
This forces users to manually click the input before typing, which breaks expected Combobox behavior.

The root cause is Radix’s focus trapping inside DropdownMenu, which blocks the input’s built-in autoFocus from running.

Solution

This PR updates all Combobox template variants so that the input reliably receives focus, even inside focus-trapped components such as DropdownMenu and Popover.

The fix uses a small, consistent pattern across templates:

• Add a controlled open state

• Create an inputRef

• Attach ref={inputRef} to

• Use useEffect to focus the input after the menu opens:

const inputRef = React.useRef<HTMLInputElement>(null)

React.useEffect(() => {
  if (open && inputRef.current) {
    setTimeout(() => {
      inputRef.current?.focus()
    }, 10)
  }
}, [open])

This ensures the input autofocuses correctly when:

• Opening a Combobox inside a DropdownMenu submenu

• Using a Combobox inside a Popover

• Using the form-based Combobox example

• Using either the Default or New York theme templates

Files Updated

• ComboboxDropdownMenu (NY v4)

• ComboboxForm (NY v4)

• ComboboxDropdownMenu (default)

• ComboboxForm (default)

Verification

Tested on:

• macOS Chrome

• macOS Safari

All variations now autofocus correctly, without breaking any existing behavior.

[vercel]

@devel-maverick is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.