From 658595011f7e0382c533e42a21be2b69cb2cbdbc Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 21 Oct 2026 23:58:28 -0600
Subject: [PATCH] fix: search input in combobox flashes dropdown and allow
 arrow to be clickable

---
 packages/ui/src/components/base/Combobox.vue | 53 ++++++++++++++------
 1 file changed, 38 insertions(+), 15 deletions(-)

diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index 81174c22fc..ec85bd9dbd 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -39,12 +39,25 @@
 				@clear="handleSearchClear"
 			>
 				<template v-if="showChevron" #trailing>
-					<ChevronLeftIcon
-						class="cursor-pointer size-5 text-secondary transition-transform duration-150"
-						:class="isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'"
+					<button
+						type="button"
+						tabindex="-1"
+						class="flex size-7 -m-2 shrink-0 cursor-pointer items-center justify-center border-none bg-transparent p-0 text-secondary disabled:cursor-not-allowed"
+						:disabled="disabled"
+						:aria-expanded="isOpen"
+						:aria-haspopup="listbox ? 'listbox' : 'menu'"
+						aria-label="Toggle dropdown"
 						@mousedown.prevent
-						@click.stop="handleSearchIconClick"
-					/>
+						@click.stop="handleSearchChevronClick"
+					>
+						<ChevronLeftIcon
+							class="pointer-events-none size-5 transition-transform duration-150"
+							:class="
+								isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'
+							"
+							aria-hidden="true"
+						/>
+					</button>
 				</template>
 			</Input>
 		</div>
@@ -1024,13 +1037,16 @@ function handleSearchClick() {
 	}
 }
 
-function handleSearchIconClick() {
-	if (isOpen.value) {
-		closeDropdown(false)
-		return
-	}
+function handleSearchChevronClick() {
+	if (props.disabled) return
 
-	openDropdown()
+	const wasOpen = isOpen.value
+	searchTriggerRef.value?.focus()
+	if (wasOpen) {
+		closeDropdown()
+	} else {
+		openDropdown()
+	}
 }
 
 function handleWindowResize() {
@@ -1062,10 +1078,17 @@ function startPositionTracking() {
 	listenerWindow.addEventListener('beforeunload', handleWindowClose)
 	listenerWindow.visualViewport?.addEventListener('scroll', handleViewportChange)
 	listenerWindow.visualViewport?.addEventListener('resize', handleViewportChange)
-	stopOutsideClick = onClickOutside(dropdownRef, () => closeDropdown(false), {
-		window: listenerWindow,
-		ignore: outsideClickIgnoreTargets,
-	})
+	stopOutsideClick = onClickOutside(
+		dropdownRef,
+		(event) => {
+			if (containerRef.value && event.composedPath().includes(containerRef.value)) return
+			closeDropdown(false)
+		},
+		{
+			window: listenerWindow,
+			ignore: outsideClickIgnoreTargets,
+		},
+	)
 }
 
 function stopPositionTracking() {