[Select-Menu] Empty value placeholder logic is broken

[onurusluca]

Environment

• Operating System: Windows_NT
• Node Version: v20.18.0
• Nuxt Version: -
• CLI Version: 3.14.0
• Nitro Version: -
• Package Manager: unknown
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Version

v3.0.0-alpha.6

Reproduction

Cannot use v3 on stackblitz so no repo.

Description

When value is empty string placeholder doesn't show.

const items = ref(["Backlog", "Todo", "In Progress", "Done"]);
const value = ref("");

<USelectMenu
      v-model="value"
      placeholder="DummyItem"
      :items="items"
      class="w-full"
    />

This doesn't happen with input-menu. Gonna use that for now.
It only show when there is nothing(undefined):
const value = ref(); which doesn't work well with types and is not really realistic.
Also it with 'null' it breaks:
TypeError: Cannot read properties of null (reading 'label')

It should use placeholder when:

• null
• empty string
• empty

Additional context

No response

Logs

No response

[onurusluca]

Also say I have this object that I want to use for the v-model, because not every value is string in real world:
initally it is empty:
{ id: null, name: '' }

If I do this:

<USelectMenu
        v-model="state.province"
        :items="provinces"
        :placeholder="$t('addressSelection.province')"
        class="w-full"
      />

I get this type error(and no placeholder):

Type '{ id: number | null; name: string | undefined; }' is not assignable to type '{ label?: string | undefined; icon?: string | undefined; avatar?: { as?: string | object | undefined; src?: string | undefined; alt?: string | undefined; icon?: string | undefined; text?: string | undefined; size?: "xs" | ... 8 more ... | undefined; class?: any; ui?: { ...; } | undefined; delayMs?: number | undefine...'.ts-plugin(2322)
ComboboxRoot.d.ts(41, 5): The expected type comes from property 'modelValue' which is declared here on type '{ readonly onFocus?: ((payload: FocusEvent) => any) | undefined; readonly onBlur?: ((payload: FocusEvent) => any) | undefined; readonly onChange?: ((payload: Event) => any) | undefined; ... 37 more ...; loadingIcon?: string | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'

Instead if I do this:

<USelectMenu
        v-model="state.province.name"
        :items="provinces"
        :placeholder="$t('addressSelection.province')"
        class="w-full"
      />

I get this:

Type 'string | undefined' is not assignable to type '{ label?: string | undefined; icon?: string | undefined; avatar?: { as?: string | object | undefined; src?: string | undefined; alt?: string | undefined; icon?: string | undefined; text?: string | undefined; size?: "3xs" | ... 8 more ... | undefined; class?: any; ui?: { ...; } | undefined; delayMs?: number | undefin...'.
  Type 'string' is not assignable to type '{ label?: string | undefined; icon?: string | undefined; avatar?: { as?: string | object | undefined; src?: string | undefined; alt?: string | undefined; icon?: string | undefined; text?: string | undefined; size?: "3xs" | ... 8 more ... | undefined; class?: any; ui?: { ...; } | undefined; delayMs?: number | undefin...'.ts-plugin(2322)
ComboboxRoot.d.ts(41, 5): The expected type comes from property 'modelValue' which is declared here on type '{ readonly "onUpdate:modelValue"?: ((value: { label?: string | undefined; icon?: string | undefined; avatar?: { as?: string | object | undefined; src?: string | undefined; alt?: string | undefined; ... 5 more ...; delayMs?: number | undefined; } | undefined; chip?: { ...; } | undefined; type?: "label" | ... 2 more ....'

It's not very realistic or optimal but let's use 'label' instead of name as types complain(we can maybe use https://ui3.nuxt.dev/components/select-menu#value-key instead? Is that what this is for?):
{ id: null, label: "" }

<USelectMenu
        v-model="state.province"
        :items="provinces"
        :placeholder="$t('addressSelection.province')"
        class="w-full"
      />

No errors! But no placeholder as well:

Docs
Type 'string' is not assignable to type '{ label?: string | undefined; icon?: string | undefined; avatar?: { as?: string | object | undefined; src?: string | undefined; alt?: string | undefined; icon?: string | undefined; text?: string | undefined; size?: "3xs" | ... 8 more ... | undefined; class?: any; ui?: { ...; } | undefined; delayMs?: number | undefin...'.ts-plugin(2322)
ComboboxRoot.d.ts(41, 5): The expected type comes from property 'modelValue' which is declared here on type '{ readonly "onUpdate:modelValue"?: ((value: { label?: string | undefined; icon?: string | undefined; avatar?: { as?: string | object | undefined; src?: string | undefined; alt?: string | undefined; ... 5 more ...; delayMs?: number | undefined; } | undefined; chip?: { ...; } | undefined; type?: "label" | ... 2 more ....'