Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
moroshko opened this issue Aug 16, 2023 · 8 comments
Open

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

moroshko opened this issue Aug 16, 2023 · 8 comments

Comments

@moroshko
Copy link

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
Copy link

JamesParkinSonos commented Aug 22, 2023

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
Copy link

moshest commented Oct 23, 2023

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
Copy link

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

@moroshko
Copy link
Author

@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
Copy link

vinceflores commented Jun 6, 2024

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
Copy link

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.

@AMerkuri
Copy link

This solution preserves selected value and allows keyboard navigation.

<Command defaultValue={value} disablePointerSelection={true}>

@maerzhase
Copy link

would be cool to get an API for this. selectFirstItem={false} would do the trick.
Example where it comes in handy: Let's say you use the UI for a search input that can display some suggestions. You want to write into the input and submit the search query only OR you wanna select an item (via keyboard or mouse) and trigger the suggestion.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants