USelectMenu | UInputMenu filter not working with value-key

[JulBeg]

Environment

• Operating System: Linux
• Node Version: v20.9.0
• Nuxt Version: 3.14.1592
• CLI Version: 3.15.0
• Nitro Version: 2.10.4
• Package Manager: npm@10.1.0
• Builder: -
• User Config: default
• Runtime Modules: @vueuse/nuxt@11.3.0, @nuxt/ui@3.0.0-alpha.9, @pinia/nuxt@0.5.5, nuxt-auth-sanctum@0.5.2, nuxt-i18n-micro@1.33.0
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0-alpha.9

Reproduction

https://ui3.nuxt.dev/components/input-menu#value-key

Description

In components <USelectMenu /> and <UInputMenu /> filter is not working when using an array of object and the "value-key" prop

Additional context

No response

Logs

[rigtigeEmil]

@benjamincanac I see your comment in the related thread - does that mean this issue will be solved as part of it? I'm also not 100% if it's the same as the issue I'm currently experiencing, but it seems like it is. This is my (simplified) repro:

<template>
    <USelectMenu
        v-model="modelValue"
        v-model:search-term="searchTerm"
        value-key="iso"
        :items="filteredCountries"
        :filter="false"
    >
        <template
            v-if="modelValue"
            #default
        >
            {{ modelValue }}
        </template>

        <template #item="{ item }">
            {{ item }}
        </template>
    </USelectMenu>
</template>

<script lang="ts" setup>
const modelValue = defineModel<string | undefined>();

const countries = [
    { name: 'denmark', iso: 'dk' },
    { name: 'sweden', iso: 'se' },
    { name: 'norway', iso: 'no' },
];
const searchTerm = ref('');
const filteredCountries = computed(() => {
    if (!searchTerm.value) {
        return countries;
    }

    const lowerCasedSearchTerm = searchTerm.value.toLowerCase();
    return countries.filter(country =>
        country.iso.toLowerCase().includes(lowerCasedSearchTerm)
        || country.name.toLowerCase().includes(lowerCasedSearchTerm),
    );
});
</script>