USelectMenu create-item="always" not working

[projct1]

Environment

• Operating System: Linux
• Node Version: v22.4.0
• Nuxt Version: 3.16.2
• CLI Version: 3.25.0
• Nitro Version: 2.11.9
• Package Manager: [email protected]
• Builder: -
• User Config: css, app, modules, imports, compatibilityDate, sanctum, fileStorage, ssr
• Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected], [email protected], @vueuse/[email protected], [email protected], @nuxtjs/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

Nuxt UI version 3.0.2

Reproduction

<script setup lang="ts">
const model = defineModel()

const query = ref('')
const items = ref([])

const isOpen = ref(false)
const isLoading = ref(false)

const search = useDebounceFn(async () => {
  if (query.value.length > 1) {
    isLoading.value = true

    items.value = (await fetchApi('categories?q=' + query.value)).data

    isLoading.value = false
  }
}, 250)

function create(name) {
  model.value = { name: name.trim() }

  query.value = ''
  isOpen.value = false
}
</script>

<template>
  <USelectMenu v-model="model"
               v-model:open="isOpen"
               v-model:search-term="query"
               :items="items"
               :loading="isLoading"
               label-key="name"
               create-item="always"
               @create="create"
               @update:search-term="search" />
</template>

Description

I want to create new category "Des", but cant, because i found "Deserts".
Option create-item="always" ignored.

Demonstration: https://skr.sh/vVFQ3lvSifh

[benjamincanac]

I just tried the create-item="always" prop and it works as expected. Would you mind sharing a working reproduction?

[projct1]

https://codesandbox.io/p/devbox/dawn-wind-hdn7pj

How i can create new item "Appl"?
Its just clumsy example :P

According to documentation:

The create option shows when no match is found by default. Set it to always to show it even when similar values exist.

So, in my example, similar values exist (starts with "Apple"), but creat option 'Create "Appl"' not shown =\

[benjamincanac]

Thanks for the reproduction, I found the issue 😊

BTW unrelated to the issue but here's another approach to implement debounce search:

<script setup lang="ts">
const q = ref('')
const qDebounced = refDebounced(q, 250)

const { data: items, status } = await useFetch('https://dummyjson.com/products/search', {
  params: {
    q: qDebounced
  },
  transform: (data) => {
    return data.products
  },
  lazy: true
})
...
</script>

[projct1]

Oh, thanks, that looks concise)

[projct1]

By the way, how i can trigger fetch only if query length > 1?

[projct1]

@benjamincanac Hey, i guess we don't need to show the create item if the dropdown already has exactly the item we want, otherwise we'll create a duplicate?

Updated: https://codesandbox.io/p/sandbox/dawn-wind-hdn7pj
Video: https://skrinshoter.ru/vVJAaKXxRWR