From ef4914686b714250c79fef900144ee6fc11bd38e Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 1 Jul 2026 10:18:53 -0700
Subject: [PATCH] fix: button trigger placeholder text styles

---
 packages/ui/src/components/base/Combobox.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 8b8230e3eb..17821812a4 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -76,8 +76,14 @@
 					v-if="showIconInSelected && selectedOption?.icon"
 					class="h-5 w-5 shrink-0"
 				/>
-				<span class="min-w-0 truncate text-primary font-semibold leading-tight">
-					<slot name="selected" :label="triggerText">{{ triggerText }}</slot>
+				<span
+					v-if="selectedOption"
+					class="min-w-0 truncate text-primary font-semibold leading-tight"
+				>
+					<slot name="selected" :label="selectedTriggerText">{{ selectedTriggerText }}</slot>
+				</span>
+				<span v-else class="min-w-0 truncate text-secondary opacity-70 font-medium leading-tight">
+					{{ placeholderText }}
 				</span>
 			</div>
 			<div class="flex shrink-0 items-center gap-1">
@@ -391,9 +397,13 @@ const searchableInputClass = computed(() => {
 	return parts.join(' ')
 })
 
-const triggerText = computed(() => {
+const selectedTriggerText = computed(() => {
+	if (props.displayValue !== undefined) return props.displayValue
+	return selectedOption.value?.label ?? ''
+})
+
+const placeholderText = computed(() => {
 	if (props.displayValue !== undefined) return props.displayValue
-	if (selectedOption.value) return selectedOption.value.label
 	return props.placeholder
 })