[Bug] MultiSelectorItem duplicate child

[thangdevalone]

When I hover on the Item it affects 2 items with the same child

[iamabhshk]

Shall I work on this issue? @pacocoursey

[Akhilathina]

Yes I am also facing the same issue

[Akhilathina]

`const CommandItem = React.forwardRef< React.ElementRef<typeof CommandPrimitive.Item>, React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>

(({ className, ...props }, ref) => ( <CommandPrimitive.Item ref={ref} className={cn( 'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground', className, )} key={props.value} {...props} /> ));`

I am using shadcn components, Using key to give unique value to Item solves the issue

[iampava]

I encountered the same issue. The solution was to have a unique value passed to Command.Item and a different one rendered in the UI.

[jrnxf]

I encountered the same issue. The solution was to have a unique value passed to Command.Item and a different one rendered in the UI.

I'd still consider this a bug because adding a unique value beyond what the user sees affects how the command list is filtered.

Imagine we have two items with the label of apple, one with id of 123 and another with 234. The proposed solution might mean passing label + id as the value to differentiate for cmdk - something like this:

apple - 123 apple - 234

But if I type in 123 I don't want to see anything. I only want the word apple to be used to filter against.

One option is to check for the presence of keywords and only use that to filter against. I sorta think this should be the default experience.

For now I'm doing this manually with

filter={(value, search, keywords) => {
  const searchValue =
    keywords && keywords.length > 0 ? keywords.join(" ") : value;

  return searchValue.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
}}

[sleighsoft]

For those that are looking for a simple solution.

This will work as expected assuming you have yourobjects where there may be duplicate names.

import { defaultFilter as commandFilter } from "cmdk";

<Command
          filter={(value, search, keywords) =>
            commandFilter("", search, keywords)
          }
        >
...
<CommandItem
                  key={yourobject.id}
                  value={yourobject.id}
                  keywords={[yourobject.name]}
...