[SelectMenu] creatable bugged when not using multiple

[jeannen]

Environment

• Operating System: Darwin
• Node Version: v22.4.0
• Nuxt Version: 3.13.2
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Version

2.18.6

Reproduction

Not working:

<template>
    <USelectMenu v-model="selectedTheme" name="labels" :options="themeOptions" value-attribute="id" option-attribute="label" searchable creatable placeholder="Select labels" />
    {{ selectedTheme }}
    <br />
</template>

<script setup lang="ts">
    defineProps({
        media: {
            type: Object,
            required: true,
        },
    });

    const mediaPresets = useMediaPresets();

    const selectedTheme = ref('');

    const themeOptions = computed(() => {
        return mediaPresets.themes.map((theme) => ({
            id: theme.id,
            label: `${theme.emoji} ${theme.display}`,
        }));
    });
</script>

Working / Fix:

<template>
    <USelectMenu v-model="themesProxy" name="labels" :options="themeOptions" searchable creatable placeholder="Select labels" />
    {{ selectedTheme }}
    <br />
</template>

<script setup lang="ts">
    defineProps({
        media: {
            type: Object,
            required: true,
        },
    });
    const mediaPresets = useMediaPresets();

    const selectedTheme = ref('my_value');

    const themeOptions = computed(() => {
        return mediaPresets.themes.map((theme) => ({ id: theme.id, label: `${theme.emoji} ${theme.display}` }));
    });

    const themesProxy = computed({
        get: () => {
            const existingTheme = themeOptions.value.find((theme) => theme.id === selectedTheme.value);
            if (existingTheme) return existingTheme;
            return { id: selectedTheme.value, label: selectedTheme.value?.replace(/\s/g, '-')?.toLowerCase() };
        },

        set: (newValue: any) => {
            if (newValue.label && !newValue.id) newValue.id = newValue.label.replace(/\s/g, '-').toLowerCase();
            selectedTheme.value = newValue.id;
        },
    });

</script>

Description

When using the creatable option, the selected value does not show up properly in the input.


The v-model properly changes ({{ selectedTheme }} under the input), but it doesn't show up in the input afterward not in the "create xyz' text

The issue seems to happens when not using multiple

Additional context

No response

Logs

No response