fix(combobox): show selected values in multi-select trigger label

The collapsed trigger was reading only `selectedOption` (the single-value
path) and falling back to the placeholder when nothing matched, so a
multi-select dropdown with 1+ checked items still rendered "Select one or
more channels" instead of the actual selections.

Added `multiSelectLabel` derived from `multiSelectValues`:
- 1 value  → that label
- 2 values → "A, B"
- 3+       → "A, B +N"

Trigger now prefers `multiSelectLabel` when present and falls back to the
single-select label / placeholder otherwise. Muted-text color also flips
off when multi has any selection.
This commit is contained in:
Waleed Latif
2026-05-22 08:23:12 -07:00
parent 1afa8815c2
commit 1edfc47183
@@ -214,6 +214,22 @@ const Combobox = memo(
[allOptions, effectiveSelectedValue]
)
/**
* Label rendered in the collapsed trigger for multi-select mode.
* Shows the single label when one value is picked, comma-joined labels
* for two, or "first, second +N" when more are selected. Falls back to
* the raw value if an option for it hasn't loaded yet.
*/
const multiSelectLabel = useMemo(() => {
if (!multiSelect || !multiSelectValues || multiSelectValues.length === 0) return null
const labelFor = (v: string) => allOptions.find((opt) => opt.value === v)?.label ?? v
if (multiSelectValues.length === 1) return labelFor(multiSelectValues[0])
if (multiSelectValues.length === 2) {
return `${labelFor(multiSelectValues[0])}, ${labelFor(multiSelectValues[1])}`
}
return `${labelFor(multiSelectValues[0])}, ${labelFor(multiSelectValues[1])} +${multiSelectValues.length - 2}`
}, [multiSelect, multiSelectValues, allOptions])
/**
* Filter options based on current value or search query
*/
@@ -590,11 +606,11 @@ const Combobox = memo(
<span
className={cn(
'flex-1 truncate',
!selectedOption && 'text-[var(--text-muted)]',
!selectedOption && !multiSelectLabel && 'text-[var(--text-muted)]',
overlayContent && 'text-transparent'
)}
>
{selectedOption ? selectedOption.label : placeholder}
{multiSelectLabel ?? (selectedOption ? selectedOption.label : placeholder)}
</span>
<ChevronDown
className={cn(