cmdk icon indicating copy to clipboard operation
cmdk copied to clipboard

First item is selected by default - can this be disabled?

Open moroshko opened this issue 2 years ago • 13 comments

Just wondering whether the default behaviour of selecting the first item in the list is some sort of accessibility requirement (if so, could you please point to the docs?), and whether this is something the can be disabled? I was looking for something like selectFirstItem={false} but couldn't find such API.

moroshko avatar Aug 16 '23 01:08 moroshko

~~It would be great if there was a way to specify which item should be selected first.~~

Actually, this was easy once I figured out how. You can set the value prop on the Command component to the item you want to be selected first.

JamesParkinSonos avatar Aug 22 '23 18:08 JamesParkinSonos

My solution is to add a hidden value to it will be automatically selected:

<CommandItem value="-" className="hidden" />

The hidden class make sure it will not be visible but still controlled and selected by cmdk.

moshest avatar Oct 23 '23 15:10 moshest

+1 on this being a somewhat arbitrary requirement. We should have the flexibility to set this

sunwrobert avatar Dec 01 '23 05:12 sunwrobert

@pacocoursey Do I understand correctly that in v1.0 it's still not possible to disable the auto-select of the first item? Is it some sort of accessibility concern?

moroshko avatar Mar 14 '24 09:03 moroshko

Heres an example where only the CommandItem selected is highlighted on render

     {repos?.map((repo: string, i: number) => {
              const pathName = usePathname();
              const selected = pathName === `/${repo}`;
              return (
                <Link key={i} href={`/${repo}`}>
                  <CommandItem
                    value={selected? "-": ""}
                    className={`${
                      selected ? "bg-accent" : "bg-background"
                    } `}
                  >
                    {repo}
                  </CommandItem>
                </Link>
              );
            })}

vinceflores avatar Jun 06 '24 03:06 vinceflores

If the component sits below the fold, the page will always scroll to the first selected item, which is a pain. Any way to disable any kind of selection on render would be much appreciated.

andrecasal avatar Jul 02 '24 14:07 andrecasal