[select] Select.Value does not consult items for multi array values #3229
Description
Bug report
Currently, Select.Value does not return correct labels when used with <Select.Root items={[]} />, but it does work for object items with structure { value, label } or with itemToStringLabel:
const items = [
{
value: "apple",
label: "Apple",
},
{
value: "banana",
label: "Banana",
},
{
value: "cherry",
label: "Cherry",
},
{
value: "orange",
label: "Orange",
},
];
<Select.Root items={items} multiple>
<Select.Trigger>
<Select.Value />
</Select.Trigger>
<Select.Portal>
<Select.Positioner>
<Select.Popup>
<Select.List>
{items.map((item) => (
<Select.Item value={item.value}>{item.label}</Select.Item>
)}
</Select.List>
</Select.Popup>
</Select.Positioner>
</Select.Portal>
</Select.Root>
Select.Value would show "apple, banana, cherry, orange" instead of "Apple, Banana, Cherry, Orange"
However, this works:
const items = [
{
value: "apple",
label: "Apple",
},
{
value: "banana",
label: "Banana",
},
{
value: "cherry",
label: "Cherry",
},
{
value: "orange",
label: "Orange",
},
];
<Select.Root multiple>
<Select.Trigger>
<Select.Value />
</Select.Trigger>
<Select.Portal>
<Select.Positioner>
<Select.Popup>
<Select.List>
{items.map((item) => (
<Select.Item value={item}>{item.label}</Select.Item>
)}
</Select.List>
</Select.Popup>
</Select.Positioner>
</Select.Portal>
</Select.Root>
Select.Value correctly shows "Apple, Banana, Cherry, Orange"
Current behavior
As above
Expected behavior
Select.Value should consistently show correct label and respect items.
Reproducible example
N/A
Base UI version
1.0.0-beta.5 (#3210)
Which browser are you using?
Edge
Which OS are you using?
MacOS
Which assistive tech are you using (if applicable)?
N/A
Additional context
The function resolveMultipleLabels would need to accept items as one of the arguments to make this work:
https://github.com/mui/base-ui/blob/master/packages/react/src/utils/resolveValueLabel.tsx#L114C1-L122C2