Accessible without Input

[zeroliu]

Hi! I'm building Select/MultiSelect components using cmdk (coming from shadcn/ui). I wonder whether the input is considered a required component in the command tree.

Here's an example without Input. The component cannot be focused any more without input, thus, the list cannot be controlled by keyboard any more.
https://codesandbox.io/p/sandbox/eloquent-ishizaka-2tlr9l?file=/src/App.tsx:9,30

[Only8Bytes]

+1

Encountering a similar issue. Keyboard navigation with arrow keys does not work when input is not selected, so would make sense that it also wouldn't work when the component doesn't exist

[apolofreitas]

turns out if you have the #cmdk-root (or any element inside it) focused the navigation will work, so if you dont put a Input component you'll have to manually focus the div.

if youre using @radix-ui/react-popover as shown in documentation you should try adding asChild prop to Popover.Content. Radix behavior is to auto focus the popover content.

i believe it would be useful to have this info in the readme.

[skelawsky]

turns out if you have the #cmdk-root (or any element inside it) focused the navigation will work, so if you dont put a Input component you'll have to manually focus the div.

if youre using @radix-ui/react-popover as shown in documentation you should try adding asChild prop to Popover.Content. Radix behavior is to auto focus the popover content.

i believe it would be useful to have this info in the readme.

Could you please provide some simplified example? I am having trouble making it work according to your way.

[callumbooth]

turns out if you have the #cmdk-root (or any element inside it) focused the navigation will work, so if you dont put a Input component you'll have to manually focus the div.
if youre using @radix-ui/react-popover as shown in documentation you should try adding asChild prop to Popover.Content. Radix behavior is to auto focus the popover content.
i believe it would be useful to have this info in the readme.

Could you please provide some simplified example? I am having trouble making it work according to your way.

@skelawsky I added tabIndex={0} to the <Command /> component, that allows the command to be focused, and the keyboard nav to work.

        <Command
          tabIndex={0}
          className="outline-none" //hides focused outline
        >

[joaopedrodcf]

turns out if you have the #cmdk-root (or any element inside it) focused the navigation will work, so if you dont put a Input component you'll have to manually focus the div.
if youre using @radix-ui/react-popover as shown in documentation you should try adding asChild prop to Popover.Content. Radix behavior is to auto focus the popover content.
i believe it would be useful to have this info in the readme.

Could you please provide some simplified example? I am having trouble making it work according to your way.

@skelawsky I added tabIndex={0} to the <Command /> component, that allows the command to be focused, and the keyboard nav to work.

        <Command
          tabIndex={0}
          className="outline-none" //hides focused outline
        >

Thanks for this solution worked really well 🥇