Select - 2 Items with same value shows same-key error in console

[penx]

I have a list of languages in a Select. I want to feature some options at the top of the Select but these options also appear alphabetically lower down with the same label and value.

When I had 2 items to a select with the same value but a different key as follows:

<form>
  <Theme>
    <Select.Root defaultValue="a">
      <Select.Trigger />
      <Select.Content>
        <Select.Item key="featured-a" value="a">
          Featured A
        </Select.Item>
        <Select.Item key="a" value="a">
          A
        </Select.Item>
      </Select.Content>
    </Select.Root>
  </Theme>
</form>

https://github.com/penx/radix-select-multiple-issue

Then an error appears in the console:

Warning: Encountered two children with the same key, a. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version

This only occurs when the Select is a descendent of a form element. I cannot recreate the issue using Radiix Primitives Select directly.

[markomitranic]

@penx seems like it is intentional 🤷 https://github.com/radix-ui/primitives/issues/2581

I ended up making values with a nanoid/key suffix, and then parsing them on the way out when making a dial code list that obviously contains duplicate values.

[adamfadrian]

I encountered a case where the keys were different, but the items had the same name, causing all of them to be highlighted when hovered. I resolved the issue by assigning a unique value to each item. example

 {searchResults.map(item => (
                <CommandItem
                  key={`${item.content_type}-${item.id}-${item.content_id}-${item.name}`}
                  value={`${item.content_type}-${item.id}-${item.content_id}-${item.name}`}
                  className="flex items-center gap-2"
                >
                  {getContentTypeIcon(item.content_type)}
                  <span>{item.name}</span>
                </CommandItem>
              ))}