fix(VSelects): recognize empty string as no value

[J-Sek]

Description

Selection controls should correctly reflect empty state. And most of the times empty string is perceived by end users as "no value". There is an edge case if "" is among options' values - it results in selection in VSelection and VAutocomplete, while VCombobox will not recognize it as selection because it does not care about item value (thus has hardcoded [''] and won't consume emptyValues from useItems)

fixes #20660

Markup:

<template>
  <v-app theme="dark">
    <v-container>
      <v-row>
        <v-col>
          <h4>Typical options</h4>
          <v-divider class="my-3" />
          <h5>VTextField</h5>
          <v-text-field v-model="msg1" :items="options1" clearable placeholder="Enter the message" />
          <h5>VSelect</h5>
          <v-select v-model="msg1" :items="options1" clearable placeholder="Select from the options" />
          <h5>VCombobox</h5>
          <v-combobox v-model="msg1" :items="options1" clearable placeholder="Select or type custom value" />
          <h5>VAutocomplete</h5>
          <v-autocomplete v-model="msg1" :items="options1" clearable placeholder="Type to find an item" />

          <pre>{{ JSON.stringify({ msg1 }) }}</pre>
        </v-col>
        <v-col>
          <h4>Options with empty string value</h4>
          <v-divider class="my-3" />
          <h5>VTextField</h5>
          <v-text-field v-model="msg2" :items="options2" clearable placeholder="Enter the message" />
          <h5>VSelect</h5>
          <v-select v-model="msg2" :items="options2" clearable placeholder="Select from the options" />
          <h5>VCombobox</h5>
          <v-combobox v-model="msg2" :items="options2" clearable placeholder="Select or type custom value" />
          <h5>VAutocomplete</h5>
          <v-autocomplete v-model="msg2" :items="options2" clearable placeholder="Type to find an item" />

          <pre>{{ JSON.stringify({ msg2 }) }}</pre>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'
const msg1 = ref('')
const msg2 = ref('')

const options1 = [
  { title: 'Alabama', value: 'AL' },
  { title: 'Alaska', value: 'AK' },
  { title: 'American Samoa', value: 'AS' },
  { title: 'Arizona', value: 'AZ' },
  { title: 'Arkansas', value: 'AR' },
]
const options2 = [
  { title: "(I don't want to disclose)", value: '' },
  { title: 'California', value: 'CA' },
  { title: 'Colorado', value: 'CO' },
  { title: 'Connecticut', value: 'CT' },
  { title: 'Delaware', value: 'DE' },
]
</script>

[yuwu9145]

I guess whether empty string is real empty is pretty subjective, different people take it differently, so I guess it's important for us to agree on an opinionated direction in Vuetify and make it clear in docs:

Current implementation can be found in this demo (empty string is legit and non-empty).

Visually, now it looks to me that makes sense to treat empty string to be real empty, for both v-text-field & all select components.

Need an opinionated agreement here, then implement and put it into docs. @johnleider @KaelWD

[johnleider]

I think we should try to normalize this if we can. I agree with @yuwu9145

[yuwu9145]

@johnleider by looking at this demo, should empty string be treated as real empty like null & undefined here?

[johnleider]

My instinct is saying it should mimic the native select functionality / behavior since that it's direct replacement.

[J-Sek]

On the contrary I get the feeling native controls are usually inferior to what frameworks provide and aligning with them means giving up UX improvements. In case of <select> it does not provide placeholder and the only workaround is to include an option with empty value (e.g. <option value="">--choose an option--</option>) that does not show up when the value is set to null. So I am not sure which implementation would mimic the native control as current one is directly opposite – shows placeholder for null and does not show it for empty string.

Giulio's argument was pretty strong – user can type something and clear it with backspace, ending up with null value and placeholder showing up. This is an inconsistency we should resolve instead of debating native behavior that everyone is trying to escape from.