fix(VAutocomplete/VCombobox): avoid input absolute position when having selection slot

[yuwu9145]

fixes #17573

Improve experience in #17291

Description

When having chip or selection shot:

• Input shouldn't be absolute positioned
• Search value (input) should always be empty when unfocused
• I will do comprehensive testing, but extra eyes on testing always welcome

Markup:

<template>
  <v-app>
    <v-container>
      <h1>Single selection</h1>
      <h2>Autocomplete</h2>
      <v-autocomplete
        :items="items"
        item-title="name"
        item-value="age"
        label="no selection slot"
        @update:search="updateSearch"
      />
      <v-autocomplete
        :items="items"
        item-title="name"
        item-value="age"
        label="selection slot"
        @update:search="updateSearch"
      >
        <template #selection="{ item }">
          <VChip>{{ item.raw.name }} - {{ item.raw.age }}</VChip>
        </template>
        <template #item="{ item, props }">
          <v-list-item v-bind="props" title="">
            {{ item.raw.name }} - {{ item.raw.age }}
          </v-list-item>
        </template>
      </v-autocomplete>

      <v-autocomplete
        :items="items"
        item-title="name"
        item-value="age"
        label="chips"
        chips
      >
        <template #item="{ item, props }">
          <v-list-item v-bind="props" title="">
            {{ item.raw.name }} - {{ item.raw.age }}
          </v-list-item>
        </template>
      </v-autocomplete>

      <h2>Combobox</h2>
      <v-combobox
        label="no selection slot"
        :modelValue="'California'"
        @update:search="updateSearch"
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
      />
      <v-combobox
        label="selection slot"
        @update:search="updateSearch"
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
      >
        <template #selection="{ item }">
          <VChip>{{ item.title }}</VChip>
        </template>
      </v-combobox>
      <v-combobox
        chips
        label="chips"
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
      />
      <h1>Multiple selection</h1>
      <h2>Autocomplete</h2>
      <v-autocomplete
        :items="items"
        item-title="name"
        item-value="age"
        multiple 
        label="no selection slot"
      />
      <v-autocomplete
        :items="items"
        item-title="name"
        item-value="age"
        multiple 
        label="selection slot"
      >
        <template #selection="{ item }">
          <VChip>{{ item.raw.name }} - {{ item.raw.age }}</VChip>
        </template>
        <template #item="{ item, props }">
          <v-list-item v-bind="props" title="">
            {{ item.raw.name }} - {{ item.raw.age }}
          </v-list-item>
        </template>
      </v-autocomplete>

      <v-autocomplete
        :items="items"
        item-title="name"
        item-value="age"
        label="chips"
        multiple 
        chips
      >
        <template #item="{ item, props }">
          <v-list-item v-bind="props" title="">
            {{ item.raw.name }} - {{ item.raw.age }}
          </v-list-item>
        </template>
      </v-autocomplete>

      <h2>Combobox</h2>
      <v-combobox
        label="no selection slot"
        multiple
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
      />
      <v-combobox
        label="selection slot"
        multiple
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
      >
        <template #selection="{ item }">
          <VChip>{{ item.title }}</VChip>
        </template>
      </v-combobox>
      <v-combobox
        chips
        multiple
        label="chips"
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
      />
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const items = [
    {
      name: 'first',
      age: 42,
    },
    {
      name: 'second',
      age: 83,
    },
  ]
  function updateSearch(search) {
    console.log('--updateSearch-', search)
  }
</script>