[select] `Select.Value` does not consult `items` for multi array values (`multiple`)

[brianle1301]

Bug report

Currently, Select.Value does not return correct labels when used with <Select.Root items={[]} />:

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:

base-ui/packages/react/src/utils/resolveValueLabel.tsx

Lines 114 to 122 in 49cfd5e

	export function resolveMultipleLabels(
	values: any[] | undefined,
	itemToStringLabel?: (item: any) => string,
	): string {
	if (!Array.isArray(values) || values.length === 0) {
	return '';
	}
	return values.map((v) => stringifyAsLabel(v, itemToStringLabel)).join(', ');
	}

[brianle1301]

I can take this if it's indeed not the expected behaviour :)

Update: Noticed that the behaviour is a bit inconsistent with Combobox.Value where it actually doesn't attempt to resolve array value at all. I do think either Combobox.Value should resolve array values, or Select.Value should ignore array values like Combobox.Value does, for consistency and symmetry.

[atomiks]

It's intentional for a couple reasons:

1. You usually always want custom formatting (children function prop) because the trigger becomes too wide with many values selected in multiple select mode
2. Unlike single select mode, you can't have a "placeholder" select value when nothing is selected as part of the items prop, as there can't be a null item rendered inside the list to show the label for

It exists mainly just for debugging purposes as it's more confusing when it's just empty

Noticed that the behaviour is a bit inconsistent with Combobox.Value

Aligning them probably makes sense, especially for the input-inside-popup layout pattern

[brianle1301]

@atomiks In that case i think i would make sense (at least to me) that the array value isn't resolved at all, just a apple,cherry,orange type of output would make sense + matches Combobox.Value. But then props like itemToStringLabel and items would only make sense in singular mode which may also confuse people

[oliviertassinari]

1. You usually always want custom formatting (children function prop) because the trigger becomes too wide with many values selected in multiple select mode

@atomiks I'm probably missing something. People could write their CSS so it ellipsizes as in https://mui.com/material-ui/react-select/#default:

or wrap as in https://react-select.com/home:

2. Unlike single select mode, you can't have a "placeholder" select value when nothing is selected as part of the items prop, as there can't be a null item rendered inside the list to show the label for

I don't see why not, it could be similar to https://mui.com/material-ui/react-select/#placeholder

• Item with value null
• If the select value is null, the item label is rendered in SelectValue
• In the SelectValue component, people can use custom CSS to make item null label feel like a placeholder.

[github-actions]

This fix will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui/react@3314