rjsf-team/react-jsonschema-form

shadcn FancySelect breaks on multiple items with the same label

已關閉

#5,126 建立於 2026年6月17日

 (3 則留言) (0 個反應) (0 位負責人)TypeScript (2,136 個分叉)batch import
bughelp wanted

倉庫指標

星標
 (13,175 顆星)
PR 合併指標
 (平均合併 3天 17小時) (30 天內合併 32 個 PR)

描述

Prerequisites

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 [&amp;_[cmdk-group-heading]]:text-muted-foreground p-1 [&amp;_[cmdk-group-heading]]:px-2 [&amp;_[cmdk-group-heading]]:py-1.5 [&amp;_[cmdk-group-heading]]:text-xs [&amp;_[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 [&amp;_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 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_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 [&amp;_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 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_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

貢獻者指南