[bug]: Redundant activation issues during "CommandItem" component mouseover

[NINE-J]

Describe the bug

Issue

A key unique to the component was passed, but the problem was identified that it was activated at the same time if the internal content was the same.

Affected Properties: aria-disabled, data-selected

I added one hidden span to solve this issue. In my case, id was a string that was released anyway, so it was okay.

If there is a better way, please share it.

Redundant activation

...
<CommandItem key={id} onSelect={()=>onClick({ id, type })}>
  <span>{text}</span>
</CommandItem>
...

Fix

...
<CommandItem key={id} onSelect={()=>onClick({ id, type })}>
  <span>{text}</span>
  <span className='hidden'>{id}</span>
</CommandItem>
...

p.s I tried to search for similar cases.

Next.js Shadcn-ui CommandItem duplicate activation Next.js Shadcn-ui CommandItem hover issue Shadcn-ui CommandItem text collision hover problem

Affected component/components

Command

How to reproduce

Same as above.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Windows, Chrome

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[pulkit-1110]

You should write value={id} along with key={id}. In my case, it works.