From 37807b84d6865eaa20f1d091ea4654a5040376a0 Mon Sep 17 00:00:00 2001
From: Ryan Lei <46210430+YTLLL@users.noreply.github.com>
Date: Sat, 9 May 2026 22:44:27 +0800
Subject: [PATCH] fix(ui): add `openOnClick` prop to `Combobox` for reliable
 dropdown opening (#1795)

---------

Co-authored-by: leiyutian <leiyutian@echo.tech>
Co-authored-by-agent: Claude Opus 4.7 <noreply@anthropic.com>
---
 docs/ai/context/ui-components.md                         | 3 +++
 .../components/form/combobox-select/combobox-select.vue  | 9 +++++++--
 packages/ui/src/components/form/combobox/combobox.vue    | 3 +++
 .../src/components/form/field/field-combobox-select.vue  | 4 ++++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/docs/ai/context/ui-components.md b/docs/ai/context/ui-components.md
index 547a91029..1595abcb1 100644
--- a/docs/ai/context/ui-components.md
+++ b/docs/ai/context/ui-components.md
@@ -379,6 +379,7 @@ Searchable dropdown/autocomplete using reka-ui with grouping.
 | `options` | `ComboboxOptionItem<T>[] \| ComboboxOptionGroupItem<T>[]` | *(required)* | Options |
 | `placeholder` | `string?` | — | Placeholder |
 | `disabled` | `boolean?` | `false` | Disabled |
+| `openOnClick` | `boolean?` | `true` | Auto-open dropdown on click |
 | `contentMinWidth` | `string \| number?` | — | Dropdown min width |
 | `contentWidth` | `string \| number?` | — | Dropdown width |
 
@@ -394,6 +395,7 @@ Simplified Combobox wrapper for string/number options.
 | `options` | `{ label, value, description?, disabled?, icon? }[]?` | — | Options |
 | `placeholder` | `string?` | — | Placeholder |
 | `disabled` | `boolean?` | `false` | Disabled |
+| `openOnClick` | `boolean?` | `true` | Auto-open dropdown on click |
 | `title` | `string?` | — | Title |
 | `layout` | `'horizontal' \| 'vertical'?` | — | Layout direction |
 | `contentMinWidth` | `string \| number?` | — | Dropdown min width |
@@ -527,6 +529,7 @@ All Field components wrap a base input with `label`, `description`, and consiste
 | `options` | `{ label, value, description?, disabled?, icon? }[]?` | — | Options |
 | `placeholder` | `string?` | — | Placeholder |
 | `disabled` | `boolean?` | `false` | Disabled |
+| `openOnClick` | `boolean?` | `true` | Auto-open dropdown on click |
 | `layout` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout |
 
 **v-model**: `modelValue: string`
diff --git a/packages/ui/src/components/form/combobox-select/combobox-select.vue b/packages/ui/src/components/form/combobox-select/combobox-select.vue
index 7f71a30ae..92460ea8a 100644
--- a/packages/ui/src/components/form/combobox-select/combobox-select.vue
+++ b/packages/ui/src/components/form/combobox-select/combobox-select.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Combobox } from '../combobox'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   options?: {
     label: string
     value: string | number
@@ -11,11 +11,15 @@ const props = defineProps<{
   }[]
   placeholder?: string
   disabled?: boolean
+  openOnClick?: boolean
   title?: string
   layout?: 'horizontal' | 'vertical'
   contentMinWidth?: string | number
   contentWidth?: string | number
-}>()
+}>(), {
+  disabled: false,
+  openOnClick: true,
+})
 
 const modelValue = defineModel<string | number>({ required: false })
 </script>
@@ -25,6 +29,7 @@ const modelValue = defineModel<string | number>({ required: false })
     v-model="modelValue"
     :options="[{ groupLabel: '', children: props.options }]"
     :disabled="props.disabled"
+    :open-on-click="props.openOnClick"
     :content-min-width="props.contentMinWidth"
     :content-width="props.contentWidth"
     :placeholder="props.placeholder"
diff --git a/packages/ui/src/components/form/combobox/combobox.vue b/packages/ui/src/components/form/combobox/combobox.vue
index ee4db5f0c..dd48102b1 100644
--- a/packages/ui/src/components/form/combobox/combobox.vue
+++ b/packages/ui/src/components/form/combobox/combobox.vue
@@ -35,10 +35,12 @@ const props = withDefaults(defineProps<{
   options: ComboboxOptionItem<T>[] | ComboboxOptionGroupItem<T>[]
   placeholder?: string
   disabled?: boolean
+  openOnClick?: boolean
   contentMinWidth?: string | number
   contentWidth?: string | number
 }>(), {
   disabled: false,
+  openOnClick: true,
 })
 
 const modelValue = defineModel<T>({ required: false })
@@ -83,6 +85,7 @@ function toCssSize(value?: string | number): string | undefined {
   <ComboboxRoot
     v-model="modelValue"
     :disabled="props.disabled"
+    :open-on-click="props.openOnClick"
     :class="['relative', 'w-full', 'h-fit']"
   >
     <ComboboxAnchor
diff --git a/packages/ui/src/components/form/field/field-combobox-select.vue b/packages/ui/src/components/form/field/field-combobox-select.vue
index e96708bdf..f5d554b55 100644
--- a/packages/ui/src/components/form/field/field-combobox-select.vue
+++ b/packages/ui/src/components/form/field/field-combobox-select.vue
@@ -13,12 +13,15 @@ const props = withDefaults(defineProps<{
   }[]
   placeholder?: string
   disabled?: boolean
+  openOnClick?: boolean
   layout?: 'horizontal' | 'vertical'
   selectClass?: string | string[]
   contentMinWidth?: string | number
   contentWidth?: string | number
 }>(), {
   layout: 'horizontal',
+  disabled: false,
+  openOnClick: true,
 })
 
 const modelValue = defineModel<string>({ required: false })
@@ -55,6 +58,7 @@ const modelValue = defineModel<string>({ required: false })
           :options="props.options?.filter(option => option.label && option.value) || []"
           :placeholder="props.placeholder"
           :disabled="props.disabled"
+          :open-on-click="props.openOnClick"
           :content-min-width="props.contentMinWidth"
           :content-width="props.contentWidth"
           :title="label"