undefined value for <USelect> option is not honored, label is used instead

[TheAlexLichter]

Environment

Stackblitz

Version

2.15.2

Reproduction

https://stackblitz.com/edit/nuxt-ui-1702?file=package-lock.json

1. Select the first option
2. See that select is not undefined.

Description

When creating options for the USelect component and providing a value purposefully as undefined, the custom value will not be considered and the label value will be used.

Additional context

No response

Logs

No response

[moshetanzer]

Hey @manniL,

Nice to see you around here 😄

This seems to have been implemented on purpose:

https://github.com/nuxt/ui/blob/8d9d9736ba6a0f25d8cd0b60e1ca50b072a3d176/src/runtime/components/forms/Select.vue#L201C1-L207C6

I hear you though, have the following immediate solution (funcs may not be nessaccry at all):

    const guessOptionValue = (option: any) => {
  return get(option, props.valueAttribute, '')
}

const guessOptionText = (option: any) => {
  return get(option, props.optionAttribute, '')
}

Guess if important now you can patch in the meantime. Else @benjamincanac what are your thoghts?

[benjamincanac]

I guess we can remove the default values indeed, I honestly don't remember why we added those 😅

[benjamincanac]

I've been looking at this and it doesn't seem related to default values. You need to have an empty <option> for this to work which can be automatically added by using the placeholder prop: https://ui.nuxt.com/components/select#placeholder.

@manniL It might be easier to achieve what you want using the SelectMenu component.

[moshetanzer]

@benjamincanac still feel that one might have undefined value in array they pass on purpose, surely we should remove the guess functions?