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

@@ -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`

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"

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

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"