mirror of
https://github.com/simstudioai/sim.git
synced 2026-09-24 15:45:35 +08:00
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:
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user