From 1edfc471838505c0be1b958ab3d54cf01c2df9cc Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Fri, 22 May 2026 08:23:12 -0700
Subject: [PATCH] fix(combobox): show selected values in multi-select trigger
 label
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../emcn/components/combobox/combobox.tsx     | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/sim/components/emcn/components/combobox/combobox.tsx b/apps/sim/components/emcn/components/combobox/combobox.tsx
index f423f7fa93..5172d5db33 100644
--- a/apps/sim/components/emcn/components/combobox/combobox.tsx
+++ b/apps/sim/components/emcn/components/combobox/combobox.tsx
@@ -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(