shadcn FancySelect breaks on multiple items with the same label
#5126 aperta il 17 giu 2026
Metriche repository
- Star
- (13.175 star)
- Metriche merge PR
- (Merge medio 3g 3h) (42 PR mergiate in 30 g)
Descrizione
Prerequisites
- I have searched the existing issues
- I understand that providing a SSCCE example is tremendously useful to the maintainers.
- I have read the documentation
- Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.
What theme are you using?
shadcn
Version
6.4.1
Current Behavior
FancySelectItem has value and label. While certainly not ideal, you can have two items with the same label but different values (IDs). This breaks the UI, since the value is not passed on to CommandItem.
The cmdk docs state:
You should provide a unique value for each item, but it will be automatically inferred from the .textContent.
Expected Behavior
The FancySelect widget should be able to handle multiple items with the same label but different values.
Steps To Reproduce
Something like this, but the shadcn CSS setup is missing: https://codesandbox.io/p/sandbox/vjpy43
You can see it in the rendered HTML though, both items have data-selected="true".
<div class="relative">
<div class="absolute w-full z-10 rounded-md border bg-popover text-popover-foreground shadow-md outline-none"
style="top: 0.5rem;">
<div data-slot="command-group"
class="text-foreground [&_[cmdk-group-heading]]:text-muted-foreground p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium h-full overflow-auto"
cmdk-group="" role="presentation" data-value="undefined">
<div cmdk-group-items="" role="group">
<div data-slot="command-list" class="max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto" cmdk-list=""
role="listbox" tabindex="-1" aria-label="Suggestions" id="radix-:r3:" style="--cmdk-list-height: 36.0px;">
<div cmdk-list-sizer="">
<div data-slot="command-item"
class="data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground px-2 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer relative flex items-center justify-between rounded-sm py-1.5 gap-2 rtl:flex-row-reverse"
id="radix-:r1r:" cmdk-item="" role="option" aria-disabled="false" aria-selected="true"
data-disabled="false" **data-selected="true"** data-value="ChatGPT 5 Mini"><span>ChatGPT 5 Mini</span><span
class="flex h-3.5 w-3.5 items-center justify-center"></span></div>
<div data-slot="command-item"
class="data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground px-2 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer relative flex items-center justify-between rounded-sm py-1.5 gap-2 rtl:flex-row-reverse"
id="radix-:r1t:" cmdk-item="" role="option" aria-disabled="false" aria-selected="true"
data-disabled="false" **data-selected="true"** data-value="ChatGPT 5 Mini"><span>ChatGPT 5 Mini</span><span
class="flex h-3.5 w-3.5 items-center justify-center"></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
Environment
- OS: macOS
- Node: v24.15.0
- npm: 11.12.1
Anything else?
No response