fix(VCombobox): placeholder visibility for empty string value

[jcjp]

Description

• Check the model value if it's an empty string and treat it as a not dirty value
• In this way we could show the placeholder from props

fixes #21972

Markup:

<template>
  <v-app>
    <v-container>
      <v-combobox
        v-model="d"
        placeholder="placeholder"
        persistent-placeholder
        :items="['a','b','c']"
      />
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const d = ref('')
</script>

Done with the update as per your review Jacek let me know if you still have review points thanks!

[J-Sek]

Green light from me, but I wish others could have a day or two to voice their opinions. @vuetifyjs/core-team

[johnleider]

Is there anywhere else in the framework where we parse or otherwise try to do something special when dealing with "empty" values? Are there any performance implication for building 2 more computed arrays?

[KaelWD]

Is this change necessary? Combobox only works with returnObject so modelValue=null will never match any item unless they're doing something weird with the slots.

[jcjp]

You are right, after careful investigation, it seems to be not needed. During my investigation it seems that the emptyValues are not properly set on final render thus the placeholder not being shown properly will further investigate this thanks! EDIT: I updated the code and the fix seems to be working fine.

[KaelWD]

closes #20742

this doesn't affect any other components, is that still a problem elsewhere?

[J-Sek]

closes #20742
this doesn't affect any other components, is that still a problem elsewhere?

They are overlaping, but could go together. The old #20742 is stuck a bit because, VSelect and VAutocomplete require more testing and I have dropped the ball. My concern is about transformIn not being called (?) after items are changed to include a value with '', so model/selection could be missing an item.

VCombobox is simplere and could be fixed separately/first with this PR - it would be a step forward. #20742 can stay open.

[KaelWD]

transformIn not being called (?) after items are changed

It should be, it's called in the computed getter in proxiedModel

[J-Sek]

It should be, it's called in the computed getter in proxiedModel

👍🏼 confirmed as working, shows Empty when the item is pushed with delay

setTimeout(() => {
  options1.value.push({ title: 'Empty', value: '' })
}, 2000)

That PR still needs some good testing. Assuming it gets done, we can consolidate both PRs. @jcjp , is there any major difference between both implementation changes in list-items.ts? Nevermind, it's Kael's performance improvement.