fix(VTextField): remain placeholder after values selected

[gitemad]

Description

Fix placeholder remains displayed when selecting items in components like VCombobox and VAutoComplete.
I solve this issue using isDirty value in VTextField component.

fixes #16519
fixes #16493

Markup:

VAutoComplete

<template>
  <v-app>
    <v-main>
         <v-autocomplete
            v-model="values"
            :items="items"
            placeholder="Select Item"
            multiple
          ></v-autocomplete>
    </v-main>
  </v-app>
</template>
<script>
  export default {
    data: () => ({
      items: ['foo', 'bar', 'fizz', 'buzz'],
      values: ['foo', 'bar'],
    }),
  }
</script>

VCombobox

<template>
  <v-app>
    <v-container>
      <v-combobox
        v-model="select"
        :items="items"
        label="I use chips"
        multiple
        placeholder="asdfasdfasdf"
        chips
      ></v-combobox>
    </v-container>
  </v-app>
</template>

<script>
export default {
  data () {
      return {
        select: ['Vuetify', 'Programming'],
        items: [
          'Programming',
          'Design',
          'Vue',
          'Vuetify',
        ],
      }
    },
}
</script>

[johnleider]

Can you also try to resolve the Select placeholder issue as part of this PR?

<template>
  <v-app>
    <v-main>
      <v-autocomplete
        v-model="values"
        :items="items"
        label="Autocomplete"
        placeholder="Select Item"
        multiple
      />

      <v-combobox
        v-model="values"
        :items="items"
        label="Combobox"
        multiple
        placeholder="asdfasdfasdf"
      />

      <v-select
        v-model="values"
        :items="items"
        label="Select"
        multiple
        placeholder="asdfasdfasdf"
      />

    </v-main>
  </v-app>
</template>
<script>
  export default {
    data: () => ({
      items: ['foo', 'bar', 'fizz', 'buzz'],
      values: [],
    }),
  }
</script>

[gitemad]

Can you also try to resolve the Select placeholder issue as part of this PR?

<template>
  <v-app>
    <v-main>
      <v-autocomplete
        v-model="values"
        :items="items"
        label="Autocomplete"
        placeholder="Select Item"
        multiple
      />

      <v-combobox
        v-model="values"
        :items="items"
        label="Combobox"
        multiple
        placeholder="asdfasdfasdf"
      />

      <v-select
        v-model="values"
        :items="items"
        label="Select"
        multiple
        placeholder="asdfasdfasdf"
      />

    </v-main>
  </v-app>
</template>
<script>
  export default {
    data: () => ({
      items: ['foo', 'bar', 'fizz', 'buzz'],
      values: [],
    }),
  }
</script>

Sure. I fixed it.

[johnleider]

Sure. I fixed it.

persistent-placeholder is now broken:

<template>
  <v-app>
    <v-main>
      <v-autocomplete
        v-model="values"
        :items="items"
        label="Autocomplete"
        placeholder="Select Item"
        :multiple="multiple"
        persistent-placeholder
      />

      <v-combobox
        v-model="values"
        :items="items"
        label="Combobox"
        :multiple="multiple"
        placeholder="asdfasdfasdf"
        persistent-placeholder
      />

      <v-select
        v-model="values"
        :items="items"
        label="Select"
        :multiple="multiple"
        placeholder="asdfasdfasdf"
        persistent-placeholder
      />

    </v-main>
  </v-app>
</template>
<script>
  export default {
    data: () => ({
      items: ['foo', 'bar', 'fizz', 'buzz'],
      multiple: true,
      values: [],
    }),
  }
</script>

[gitemad]

Sure. I fixed it.

persistent-placeholder is now broken:

<template>
  <v-app>
    <v-main>
      <v-autocomplete
        v-model="values"
        :items="items"
        label="Autocomplete"
        placeholder="Select Item"
        :multiple="multiple"
        persistent-placeholder
      />

      <v-combobox
        v-model="values"
        :items="items"
        label="Combobox"
        :multiple="multiple"
        placeholder="asdfasdfasdf"
        persistent-placeholder
      />

      <v-select
        v-model="values"
        :items="items"
        label="Select"
        :multiple="multiple"
        placeholder="asdfasdfasdf"
        persistent-placeholder
      />

    </v-main>
  </v-app>
</template>
<script>
  export default {
    data: () => ({
      items: ['foo', 'bar', 'fizz', 'buzz'],
      multiple: true,
      values: [],
    }),
  }
</script>

Fixed.

[johnleider]

Everything looks good except the unrelated changes to the package.json files. Can you remove them please?

[gitemad]

Everything looks good except the unrelated changes to the package.json files. Can you remove them please?

I fixed the conflicts.