Open moroshko opened 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.
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
.
+1 on this being a somewhat arbitrary requirement. We should have the flexibility to set this
@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?
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>
);
})}
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.
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.