From 9400786ca49e223f167f08b6758eb49f8d2e09d9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 8 Dec 2025 02:16:25 +0000
Subject: [PATCH 1/2] Initial plan


From 4088546822be1c0a3c3f800c2a22f9bbc0a6d95b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 8 Dec 2025 02:21:00 +0000
Subject: [PATCH 2/2] Refactor: eliminate chip rendering duplication by
 normalizing selected to array

Co-authored-by: brc-dd <40380293+brc-dd@users.noreply.github.com>
---
 lib/components/SInputDropdown.vue | 83 ++++++++++++-------------------
 1 file changed, 33 insertions(+), 50 deletions(-)

diff --git a/lib/components/SInputDropdown.vue b/lib/components/SInputDropdown.vue
index 4eec3e9b..dcaf29b2 100644
--- a/lib/components/SInputDropdown.vue
+++ b/lib/components/SInputDropdown.vue
@@ -141,6 +141,14 @@ const removable = computed(() => {
   return !!props.nullable
 })
 
+const selectedChips = computed(() => {
+  if (Array.isArray(selected.value)) {
+    return selected.value
+  }
+
+  return selected.value ? [selected.value] : []
+})
+
 const ariaActiveDescendant = computed(() => {
   if (!isInlineSearch.value || !inlineActiveOption.value) {
     return undefined
@@ -388,57 +396,32 @@ function focusInlineInput() {
       >
         <div class="box-content" :class="{ inline: isInlineSearch }">
           <template v-if="isInlineSearch">
-            <template v-if="Array.isArray(selected)">
-              <div
-                v-for="(item, i) in selected"
-                :key="item.value ?? i"
-                class="inline-chip"
-                :class="{ avatar: item.type === 'avatar' }"
+            <div
+              v-for="(item, i) in selectedChips"
+              :key="item.value ?? i"
+              class="inline-chip"
+              :class="{ avatar: item.type === 'avatar' }"
+            >
+              <template v-if="item.type === 'avatar'">
+                <div class="inline-chip-avatar">
+                  <SAvatar size="fill" :avatar="item.image" />
+                </div>
+                <div class="inline-chip-label">{{ item.label }}</div>
+              </template>
+              <template v-else>
+                <div class="inline-chip-label">{{ item.label }}</div>
+              </template>
+              <button
+                v-if="removable"
+                type="button"
+                class="inline-chip-close"
+                :aria-label="`${t.remove} ${item.label}`"
+                :disabled="disabled ?? false"
+                @click.stop="handleSelect(item.value)"
               >
-                <template v-if="item.type === 'avatar'">
-                  <div class="inline-chip-avatar">
-                    <SAvatar size="fill" :avatar="item.image" />
-                  </div>
-                  <div class="inline-chip-label">{{ item.label }}</div>
-                </template>
-                <template v-else>
-                  <div class="inline-chip-label">{{ item.label }}</div>
-                </template>
-                <button
-                  v-if="removable"
-                  type="button"
-                  class="inline-chip-close"
-                  :aria-label="`${t.remove} ${item.label}`"
-                  :disabled="disabled ?? false"
-                  @click.stop="handleSelect(item.value)"
-                >
-                  <IconX class="inline-chip-close-icon" />
-                </button>
-              </div>
-            </template>
-            <template v-else-if="selected">
-              <div class="inline-chip" :class="{ avatar: selected.type === 'avatar' }">
-                <template v-if="selected.type === 'avatar'">
-                  <div class="inline-chip-avatar">
-                    <SAvatar size="fill" :avatar="selected.image" />
-                  </div>
-                  <div class="inline-chip-label">{{ selected.label }}</div>
-                </template>
-                <template v-else>
-                  <div class="inline-chip-label">{{ selected.label }}</div>
-                </template>
-                <button
-                  v-if="removable"
-                  type="button"
-                  class="inline-chip-close"
-                  :aria-label="`${t.remove} ${selected.label}`"
-                  :disabled="disabled ?? false"
-                  @click.stop="handleSelect(selected.value)"
-                >
-                  <IconX class="inline-chip-close-icon" />
-                </button>
-              </div>
-            </template>
+                <IconX class="inline-chip-close-icon" />
+              </button>
+            </div>
 
             <input
               ref="inlineInput"