From 9f82052c8371d1e938d485691f902360cb515951 Mon Sep 17 00:00:00 2001
From: lorado <eugen.sacharow@gmx.de>
Date: Tue, 3 Feb 2026 15:39:21 +0100
Subject: [PATCH 1/8] Fix bug in `InputMenu` and `SelectMenu` components
 (#5974)

---
 .../nuxt/app/pages/components/input-menu.vue  | 26 ++++++++++++++++
 .../nuxt/app/pages/components/select-menu.vue | 31 +++++++++++++++++++
 src/runtime/components/InputMenu.vue          | 17 +++++++++-
 src/runtime/components/SelectMenu.vue         | 16 +++++++++-
 4 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/playgrounds/nuxt/app/pages/components/input-menu.vue b/playgrounds/nuxt/app/pages/components/input-menu.vue
index 67f434d0c2..5c82a7a5fc 100644
--- a/playgrounds/nuxt/app/pages/components/input-menu.vue
+++ b/playgrounds/nuxt/app/pages/components/input-menu.vue
@@ -57,6 +57,20 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
   lazy: true
 })
 
+const searchTermCreate = ref('')
+const searchTermDebouncedCreate = refDebounced(searchTermCreate, 200)
+
+const { data: usersCreate, status: statusCreate } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  params: { q: searchTermDebouncedCreate },
+  transform: (data: User[]) => {
+    return data?.map(user => ({ id: user.id, label: user.name, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
+  },
+  lazy: true
+})
+function onUserCreate(newStr: string) {
+  console.log('onUserCreate', newStr)
+}
+
 const value = ref('Apple')
 const valueMultiple = ref([fruits[0]!, vegetables[0]!])
 </script>
@@ -120,6 +134,18 @@ const valueMultiple = ref([fruits[0]!, vegetables[0]!])
         <UAvatar v-if="modelValue" :size="(ui.itemLeadingAvatarSize() as AvatarProps['size'])" v-bind="modelValue.avatar" />
       </template>
     </UInputMenu>
+    <UInputMenu
+      v-model:search-term="searchTermCreate"
+      placeholder="Multiple search users with create..."
+      icon="i-lucide-user"
+      ignore-filter
+      :items="usersCreate"
+      :loading="statusCreate === 'pending'"
+      v-bind="props"
+      :multiple="true"
+      :create-item="'always'"
+      @create="onUserCreate"
+    />
     <UInputMenu
       icon="i-lucide-layout-list"
       placeholder="Search virtualized..."
diff --git a/playgrounds/nuxt/app/pages/components/select-menu.vue b/playgrounds/nuxt/app/pages/components/select-menu.vue
index 237daa1d94..7bcee1d1c8 100644
--- a/playgrounds/nuxt/app/pages/components/select-menu.vue
+++ b/playgrounds/nuxt/app/pages/components/select-menu.vue
@@ -57,6 +57,25 @@ const { data: users, status } = await useFetch('https://jsonplaceholder.typicode
   lazy: true
 })
 
+const searchTermCreate = ref('')
+const searchTermDebouncedCreate = refDebounced(searchTermCreate, 200)
+
+const { data: usersCreate, status: statusCreate } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  params: { q: searchTermDebouncedCreate },
+  transform: (data: User[]) => {
+    return data?.map(user => ({
+      id: user.id,
+      label: user.name,
+      avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` }
+    }))
+  },
+  lazy: true
+})
+
+function onUserCreate(newStr: string) {
+  console.log('onUserCreate', newStr)
+}
+
 const value = ref('Apple')
 const valueMultiple = ref([fruits[0]!, vegetables[0]!])
 </script>
@@ -120,6 +139,18 @@ const valueMultiple = ref([fruits[0]!, vegetables[0]!])
         <UAvatar v-if="modelValue" :size="(ui.itemLeadingAvatarSize() as AvatarProps['size'])" v-bind="modelValue.avatar" />
       </template>
     </USelectMenu>
+    <USelectMenu
+      v-model:search-term="searchTermCreate"
+      placeholder="Multiple search users with create..."
+      icon="i-lucide-user"
+      ignore-filter
+      :loading="statusCreate === 'pending'"
+      :items="usersCreate"
+      v-bind="props"
+      :multiple="true"
+      :create-item="'always'"
+      @create="onUserCreate"
+    />
     <USelectMenu
       icon="i-lucide-layout-list"
       placeholder="Search virtualized..."
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index e500db032d..bec9626467 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -205,7 +205,7 @@ export interface InputMenuSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
-import { computed, useTemplateRef, toRef, onMounted, toRaw, nextTick } from 'vue'
+import { computed, useTemplateRef, toRef, onMounted, toRaw, nextTick, watch } from 'vue'
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxVirtualizer, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui'
 import { defu } from 'defu'
 import { isEqual } from 'ohash/utils'
@@ -488,6 +488,19 @@ function onClear() {
 
 const viewportRef = useTemplateRef('viewportRef')
 
+const comboboxRootRef = useTemplateRef('comboboxRootRef')
+watch(
+  () => props.items,
+  () => {
+    if (props.ignoreFilter && createItem.value) {
+      comboboxRootRef.value?.highlightFirstItem?.()
+    }
+  },
+  {
+    flush: 'post'
+  }
+)
+
 defineExpose({
   inputRef: toRef(() => inputRef.value?.$el as HTMLInputElement),
   viewportRef: toRef(() => viewportRef.value)
@@ -569,6 +582,7 @@ defineExpose({
   <ComboboxRoot
     v-slot="{ modelValue, open }"
     v-bind="rootProps"
+    ref="comboboxRootRef"
     :name="name"
     :disabled="disabled"
     data-slot="root"
@@ -614,6 +628,7 @@ defineExpose({
             data-slot="tagsInput"
             :class="ui.tagsInput({ class: props.ui?.tagsInput })"
             @change.stop
+            @keydown.enter.stop.prevent
           />
         </ComboboxInput>
       </TagsInputRoot>
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index dba7593f86..b7fd902a8f 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -198,7 +198,7 @@ export interface SelectMenuSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false">
-import { useTemplateRef, computed, onMounted, toRef, toRaw } from 'vue'
+import { useTemplateRef, computed, onMounted, toRef, toRaw, watch } from 'vue'
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel, ComboboxPortal, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxVirtualizer, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, FocusScope, useForwardPropsEmits, useFilter } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
@@ -472,6 +472,19 @@ function onClear() {
 
 const viewportRef = useTemplateRef('viewportRef')
 
+const comboboxRootRef = useTemplateRef('comboboxRootRef')
+watch(
+  () => props.items,
+  () => {
+    if (props.ignoreFilter && createItem.value) {
+      comboboxRootRef.value?.highlightFirstItem?.()
+    }
+  },
+  {
+    flush: 'post'
+  }
+)
+
 defineExpose({
   triggerRef: toRef(() => triggerRef.value?.$el as HTMLButtonElement),
   viewportRef: toRef(() => viewportRef.value)
@@ -554,6 +567,7 @@ defineExpose({
     :id="id"
     v-slot="{ modelValue, open }"
     v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    ref="comboboxRootRef"
     ignore-filter
     as-child
     :name="name"

From 2ce67d11903a256dc454a991abf390683b55a188 Mon Sep 17 00:00:00 2001
From: lorado <eugen.sacharow@gmx.de>
Date: Tue, 3 Feb 2026 17:10:01 +0100
Subject: [PATCH 2/8] Add `onInputEnter` handler to `InputMenu` and
 `SelectMenu` for enter key handling

---
 src/runtime/components/InputMenu.vue  | 9 ++++++++-
 src/runtime/components/SelectMenu.vue | 7 +++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index bec9626467..b22706b6cc 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -500,6 +500,12 @@ watch(
     flush: 'post'
   }
 )
+function onInputEnter(e: Event) {
+  if (comboboxRootRef.value?.highlightedElement) {
+    return
+  }
+  onCreate(e)
+}
 
 defineExpose({
   inputRef: toRef(() => inputRef.value?.$el as HTMLInputElement),
@@ -628,7 +634,7 @@ defineExpose({
             data-slot="tagsInput"
             :class="ui.tagsInput({ class: props.ui?.tagsInput })"
             @change.stop
-            @keydown.enter.stop.prevent
+            @keydown.enter.stop.prevent="onInputEnter"
           />
         </ComboboxInput>
       </TagsInputRoot>
@@ -646,6 +652,7 @@ defineExpose({
         @focus="onFocus"
         @change.stop
         @update:model-value="searchTerm = $event"
+        @keydown.enter="onInputEnter"
       />
 
       <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index b7fd902a8f..d60c51a6d9 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -484,6 +484,12 @@ watch(
     flush: 'post'
   }
 )
+function onInputEnter(e: Event) {
+  if (comboboxRootRef.value?.highlightedElement) {
+    return
+  }
+  onCreate(e)
+}
 
 defineExpose({
   triggerRef: toRef(() => triggerRef.value?.$el as HTMLButtonElement),
@@ -632,6 +638,7 @@ defineExpose({
               data-slot="input"
               :class="ui.input({ class: props.ui?.input })"
               @change.stop
+              @keydown.enter="onInputEnter"
             />
           </ComboboxInput>
 

From 279ed1b0eea7f74550b8b83e774f719ea9e5d803 Mon Sep 17 00:00:00 2001
From: lorado <eugen.sacharow@gmx.de>
Date: Tue, 3 Feb 2026 17:20:31 +0100
Subject: [PATCH 3/8] Improve `onInputEnter` behavior in `InputMenu` and
 `SelectMenu` to handle focus and items properly

---
 src/runtime/components/InputMenu.vue  | 8 ++++++++
 src/runtime/components/SelectMenu.vue | 8 ++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index b22706b6cc..f33ff7871f 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -501,9 +501,17 @@ watch(
   }
 )
 function onInputEnter(e: Event) {
+  // In case combobox has any focus, skip
   if (comboboxRootRef.value?.highlightedElement) {
     return
   }
+  // In case we have items but our focus is not within the combobox, just bring the focus back
+  if ((props.items && props.items.length > 0)) {
+    comboboxRootRef.value?.highlightFirstItem?.()
+    e.preventDefault()
+    e.stopPropagation()
+    return
+  }
   onCreate(e)
 }
 
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index d60c51a6d9..7a38b0bb99 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -485,9 +485,17 @@ watch(
   }
 )
 function onInputEnter(e: Event) {
+  // In case combobox has any focus, skip
   if (comboboxRootRef.value?.highlightedElement) {
     return
   }
+  // In case we have items but our focus is not within the combobox, just bring the focus back
+  if ((props.items && props.items.length > 0)) {
+    comboboxRootRef.value?.highlightFirstItem?.()
+    e.preventDefault()
+    e.stopPropagation()
+    return
+  }
   onCreate(e)
 }
 

From 6109bc608a8bfd55415064fd2a3cbcd84e1077a6 Mon Sep 17 00:00:00 2001
From: lorado <eugen.sacharow@gmx.de>
Date: Tue, 3 Feb 2026 17:25:05 +0100
Subject: [PATCH 4/8] Add validation to skip `onCreate` if item creation is
 disabled in `InputMenu` and `SelectMenu`

---
 src/runtime/components/InputMenu.vue  | 4 ++++
 src/runtime/components/SelectMenu.vue | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index f33ff7871f..a7db38837e 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -512,6 +512,10 @@ function onInputEnter(e: Event) {
     e.stopPropagation()
     return
   }
+  // In case creation is not allowed skip
+  if (!createItem.value) {
+    return
+  }
   onCreate(e)
 }
 
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 7a38b0bb99..ea0843d53b 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -496,6 +496,10 @@ function onInputEnter(e: Event) {
     e.stopPropagation()
     return
   }
+  // In case creation is not allowed skip
+  if (!createItem.value) {
+    return
+  }
   onCreate(e)
 }
 

From 97d16efe80fb74b0ccf7a0eb66d034dc003a7c85 Mon Sep 17 00:00:00 2001
From: lorado <eugen.sacharow@gmx.de>
Date: Wed, 11 Feb 2026 11:15:21 +0100
Subject: [PATCH 5/8] Track dropdown open state to ensure correct item
 highlighting in `InputMenu` and `SelectMenu`

---
 src/runtime/components/InputMenu.vue  | 4 +++-
 src/runtime/components/SelectMenu.vue | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index a7db38837e..9215de3164 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -416,7 +416,9 @@ function onFocus(event: FocusEvent) {
   emitFormFocus()
 }
 
+let isDropdownOpened = false
 function onUpdateOpen(value: boolean) {
+  isDropdownOpened = value
   let timeoutId
 
   if (!value) {
@@ -492,7 +494,7 @@ const comboboxRootRef = useTemplateRef('comboboxRootRef')
 watch(
   () => props.items,
   () => {
-    if (props.ignoreFilter && createItem.value) {
+    if (isDropdownOpened && props.ignoreFilter && createItem.value) {
       comboboxRootRef.value?.highlightFirstItem?.()
     }
   },
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index ea0843d53b..13d2f3d4e0 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -409,7 +409,9 @@ function onUpdate(value: any) {
   }
 }
 
+let isDropdownOpened = false
 function onUpdateOpen(value: boolean) {
+  isDropdownOpened = value
   let timeoutId
 
   if (!value) {
@@ -476,7 +478,7 @@ const comboboxRootRef = useTemplateRef('comboboxRootRef')
 watch(
   () => props.items,
   () => {
-    if (props.ignoreFilter && createItem.value) {
+    if (isDropdownOpened && props.ignoreFilter && createItem.value) {
       comboboxRootRef.value?.highlightFirstItem?.()
     }
   },

From e7534d930abed88b75f2e72b1632e4e74e68ae35 Mon Sep 17 00:00:00 2001
From: lorado <eugen.sacharow@gmx.de>
Date: Tue, 31 Mar 2026 15:50:35 +0200
Subject: [PATCH 6/8] fix checking highlighted element, remove double
 parathensies

---
 src/runtime/components/InputMenu.vue  | 4 ++--
 src/runtime/components/SelectMenu.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 7a63d8b00b..fae75abc65 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -539,11 +539,11 @@ watch(
 )
 function onInputEnter(e: Event) {
   // In case combobox has any focus, skip
-  if (comboboxRootRef.value?.highlightedElement) {
+  if (comboboxRootRef.value?.highlightedElement?.isConnected) {
     return
   }
   // In case we have items but our focus is not within the combobox, just bring the focus back
-  if ((props.items && props.items.length > 0)) {
+  if (props.items && props.items.length > 0) {
     comboboxRootRef.value?.highlightFirstItem?.()
     e.preventDefault()
     e.stopPropagation()
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index c41b6ed9c0..08bcb4e210 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -501,11 +501,11 @@ watch(
 )
 function onInputEnter(e: Event) {
   // In case combobox has any focus, skip
-  if (comboboxRootRef.value?.highlightedElement) {
+  if (comboboxRootRef.value?.highlightedElement?.isConnected) {
     return
   }
   // In case we have items but our focus is not within the combobox, just bring the focus back
-  if ((props.items && props.items.length > 0)) {
+  if (props.items && props.items.length > 0) {
     comboboxRootRef.value?.highlightFirstItem?.()
     e.preventDefault()
     e.stopPropagation()

From f2ef87e655cc6afdec58f77630cf0a23cfe7ae51 Mon Sep 17 00:00:00 2001
From: lorado <eugen.sacharow@gmx.de>
Date: Tue, 31 Mar 2026 16:01:24 +0200
Subject: [PATCH 7/8] Update focus logic in `InputMenu` and `SelectMenu` to use
 `filteredItems` for item checking

---
 src/runtime/components/InputMenu.vue  | 2 +-
 src/runtime/components/SelectMenu.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index fae75abc65..68c89b2bf4 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -543,7 +543,7 @@ function onInputEnter(e: Event) {
     return
   }
   // In case we have items but our focus is not within the combobox, just bring the focus back
-  if (props.items && props.items.length > 0) {
+  if (filteredItems.value && filteredItems.value.length > 0) {
     comboboxRootRef.value?.highlightFirstItem?.()
     e.preventDefault()
     e.stopPropagation()
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 08bcb4e210..1d6cd29d87 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -505,7 +505,7 @@ function onInputEnter(e: Event) {
     return
   }
   // In case we have items but our focus is not within the combobox, just bring the focus back
-  if (props.items && props.items.length > 0) {
+  if (filteredItems.value && filteredItems.value.length > 0) {
     comboboxRootRef.value?.highlightFirstItem?.()
     e.preventDefault()
     e.stopPropagation()

From 527f77f8e4390f773495e673dd530a1cf35d9ebc Mon Sep 17 00:00:00 2001
From: lorado <eugen.sacharow@gmx.de>
Date: Tue, 31 Mar 2026 16:03:17 +0200
Subject: [PATCH 8/8] Simplify `filteredItems` check in `InputMenu` and
 `SelectMenu` logic

---
 src/runtime/components/InputMenu.vue  | 2 +-
 src/runtime/components/SelectMenu.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index 68c89b2bf4..930b2ac11a 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -543,7 +543,7 @@ function onInputEnter(e: Event) {
     return
   }
   // In case we have items but our focus is not within the combobox, just bring the focus back
-  if (filteredItems.value && filteredItems.value.length > 0) {
+  if (filteredItems.value.length > 0) {
     comboboxRootRef.value?.highlightFirstItem?.()
     e.preventDefault()
     e.stopPropagation()
diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue
index 1d6cd29d87..3e3e07d729 100644
--- a/src/runtime/components/SelectMenu.vue
+++ b/src/runtime/components/SelectMenu.vue
@@ -505,7 +505,7 @@ function onInputEnter(e: Event) {
     return
   }
   // In case we have items but our focus is not within the combobox, just bring the focus back
-  if (filteredItems.value && filteredItems.value.length > 0) {
+  if (filteredItems.value.length > 0) {
     comboboxRootRef.value?.highlightFirstItem?.()
     e.preventDefault()
     e.stopPropagation()