fix(InputMenu/SelectMenu): prevent unintended item creation and improve focus handling

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..."

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..."

src/runtime/components/InputMenu.vue

@@ -450,7 +450,9 @@ function onFocus(event: FocusEvent) {
   emitFormFocus()
 }
 
+let isDropdownOpened = false
 function onUpdateOpen(value: boolean) {
+  isDropdownOpened = value
   let timeoutId
 
   if (!value) {
@@ -522,6 +524,38 @@ function onClear() {
 
 const viewportRef = useTemplateRef('viewportRef')
 
+// todo: probably need to modify (in autocomplete mode)
+const comboboxRootRef = useTemplateRef('comboboxRootRef')
+watch(
+  () => props.items,
+  () => {
+    if (isDropdownOpened && props.ignoreFilter && createItem.value) {
+      comboboxRootRef.value?.highlightFirstItem?.()
+    }
+  },
+  {
+    flush: 'post'
+  }
+)
+function onInputEnter(e: Event) {
+  // In case combobox has any focus, skip
+  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 (filteredItems.value.length > 0) {
+    comboboxRootRef.value?.highlightFirstItem?.()
+    e.preventDefault()
+    e.stopPropagation()
+    return
+  }
+  // In case creation is not allowed skip
+  if (!createItem.value) {
+    return
+  }
+  onCreate(e)
+}
+
 defineExpose({
   inputRef: toRef(() => inputRef.value?.$el as HTMLInputElement),
   viewportRef: toRef(() => viewportRef.value)
@@ -603,6 +637,7 @@ defineExpose({
   <Component.Root
     v-slot="{ modelValue, open }"
     v-bind="rootProps"
+    ref="comboboxRootRef"
     :name="name"
     :disabled="disabled"
     data-slot="root"
@@ -648,6 +683,7 @@ defineExpose({
             data-slot="tagsInput"
             :class="ui.tagsInput({ class: uiProp?.tagsInput })"
             @change.stop
+            @keydown.enter.stop.prevent="onInputEnter"
           />
         </Component.Input>
       </TagsInputRoot>
@@ -664,6 +700,7 @@ defineExpose({
         @focus="onFocus"
         @change.stop
         @update:model-value="onInputUpdate"
+        @keydown.enter="onInputEnter"
       />
 
       <span v-if="isLeading || !!avatar || !!slots.leading" data-slot="leading" :class="ui.leading({ class: uiProp?.leading })">

src/runtime/components/SelectMenu.vue

@@ -225,7 +225,7 @@ export interface SelectMenuSlots<
 </script>
 
 <script setup lang="ts" generic="T extends ArrayOrNested<SelectMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>, C extends boolean | object = 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 } from 'reka-ui'
 import { defu } from 'defu'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
@@ -422,7 +422,9 @@ function onUpdate(value: any) {
   }
 }
 
+let isDropdownOpened = false
 function onUpdateOpen(value: boolean) {
+  isDropdownOpened = value
   let timeoutId
 
   if (!value) {
@@ -485,6 +487,37 @@ function onClear() {
 
 const viewportRef = useTemplateRef('viewportRef')
 
+const comboboxRootRef = useTemplateRef('comboboxRootRef')
+watch(
+  () => props.items,
+  () => {
+    if (isDropdownOpened && props.ignoreFilter && createItem.value) {
+      comboboxRootRef.value?.highlightFirstItem?.()
+    }
+  },
+  {
+    flush: 'post'
+  }
+)
+function onInputEnter(e: Event) {
+  // In case combobox has any focus, skip
+  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 (filteredItems.value.length > 0) {
+    comboboxRootRef.value?.highlightFirstItem?.()
+    e.preventDefault()
+    e.stopPropagation()
+    return
+  }
+  // In case creation is not allowed skip
+  if (!createItem.value) {
+    return
+  }
+  onCreate(e)
+}
+
 defineExpose({
   triggerRef: toRef(() => triggerRef.value?.$el as HTMLButtonElement),
   viewportRef: toRef(() => viewportRef.value)
@@ -567,6 +600,7 @@ defineExpose({
     :id="id"
     v-slot="{ modelValue, open }"
     v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+    ref="comboboxRootRef"
     ignore-filter
     as-child
     :name="name"
@@ -634,6 +668,7 @@ defineExpose({
               data-slot="input"
               :class="ui.input({ class: uiProp?.input })"
               @change.stop
+              @keydown.enter="onInputEnter"
             />
           </ComboboxInput>