pacocoursey / cmdk

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

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

Open moroshko opened 10 months ago

moroshko commented 10 months ago

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.

JamesParkinSonos commented 10 months ago

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.

moshest commented 8 months ago

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.

sunwrobert commented 7 months ago

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

moroshko commented 3 months ago

@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?

vinceflores commented 1 month ago

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>
              );
            })}
andrecasal commented 4 days ago

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.