[6.x] Combobox: Fix search input focus (#12471)

Co-authored-by: Jason Varga <jason@pixelfear.com>

Author: duncanmcclean

packages/ui/src/Combobox.vue

@@ -232,7 +232,7 @@ function pushTaggableOption(e) {
     }
 }
 
-function openOnSpace(e) {
+function openDropdown(e) {
     if (dropdownOpen.value) return;
     if (typeof e.preventDefault === 'function') e.preventDefault();
 
@@ -265,7 +265,7 @@ defineExpose({
                 v-bind="attrs"
             >
                 <ComboboxAnchor :class="[$attrs.class]" data-ui-combobox-anchor>
-                    <ComboboxTrigger as="div" ref="trigger" :class="triggerClasses" @keydown.space="openOnSpace" data-ui-combobox-trigger>
+                    <ComboboxTrigger as="div" ref="trigger" :class="triggerClasses" @keydown.enter="openDropdown" @keydown.space="openDropdown" data-ui-combobox-trigger>
                         <div class="flex-1 min-w-0">
                             <ComboboxInput
                                 v-if="searchable && (dropdownOpen || !modelValue || (multiple && placeholder))"
@@ -279,15 +279,15 @@ defineExpose({
                                 @paste.prevent="onPaste"
                                 @keydown.enter.prevent="pushTaggableOption"
                                 @blur="pushTaggableOption"
-                                @keydown.space="openOnSpace"
+                                @keydown.space="openDropdown"
                             />
 
-                            <button type="button" class="w-full text-start truncate flex items-center gap-2 bg-transparent cursor-pointer focus:outline-none" v-else-if="!searchable && (dropdownOpen || !modelValue)" @keydown.space="openOnSpace" data-ui-combobox-placeholder>
+                            <button type="button" class="w-full text-start truncate flex items-center gap-2 bg-transparent cursor-pointer focus:outline-none" v-else-if="!searchable && (dropdownOpen || !modelValue)" @keydown.space="openDropdown" data-ui-combobox-placeholder>
                             <Icon v-if="icon" :name="icon" class="text-gray-400 dark:text-white dark:opacity-50" />
                                 <span class="text-gray-400 dark:text-gray-500" v-text="placeholder" />
                             </button>
 
-                            <button type="button" v-else class="w-full text-start bg-transparent truncate flex items-center gap-2 cursor-pointer focus:outline-none" @keydown.space="openOnSpace" data-ui-combobox-selected-option>
+                            <button type="button" v-else class="w-full text-start bg-transparent truncate flex items-center gap-2 cursor-pointer focus:outline-none" @keydown.space="openDropdown" data-ui-combobox-selected-option>
                                 <slot name="selected-option" v-bind="{ option: selectedOption }">
                                     <Icon v-if="icon" :name="icon" class="text-white/85 dark:text-white dark:opacity-50" />
                                     <span v-if="labelHtml" v-html="getOptionLabel(selectedOption)" />
@@ -316,7 +316,7 @@ defineExpose({
                         data-ui-combobox-content
                     >
                         <FocusScope
-                            trapped
+                            :trapped="!searchable"
                             @mount-auto-focus.prevent
                             @unmount-auto-focus="(event) => {
                                 if (event.defaultPrevented) return;