search

pacocoursey / cmdk

Fast, unstyled command menu React component.
https://cmdk.paco.me
MIT License
9.04k stars 259 forks source link

Accessible without Input #220

Open zeroliu opened 4 months ago

zeroliu commented 4 months ago

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 commented 4 months ago

+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 commented 4 months ago

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 commented 4 months ago

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 commented 3 months ago

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 commented 2 months ago

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 🥇