fix(VAutocomplete/VCombobox): input always absolute position when not using selection slot/chips

[yuwu9145]

fixes #19279

Cause

Input width changed when become focused, which impacts caret position. It's a default behaviour either in Vue or Js: demo

Solution

Because of #19294, input is now always aligned next to selection slot/chips, which gracefully resolves #18796.

So now input can be always safely positioned absolute when not using selection slot/chips, which means input width doesn't change, so caret position will be accurate

Description

Markup:

<template>
  <v-card>
    <v-container fluid>
      <v-row>
        <v-col cols="12">
          <v-combobox v-model="value" :items="items"></v-combobox>
          <v-autocomplete v-model="value" :items="items"></v-autocomplete>
          Issue: <a href="https://github.com/vuetifyjs/vuetify/issues/18796">#18796</a>
          <v-autocomplete
            chips
            v-model="state"
            closable-chips
            label="Autocomplete"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
          ></v-autocomplete>
          <v-combobox
            chips
            closable-chips
            v-model="state"
            label="Combobox"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
          />
          <v-select
            chips
            closable-chips
            v-model="state"
            label="Select"
            :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
          />
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      items: ['foo foo foo foo foo foo foo foo', 'bar', 'fizz', 'buzz'],
      value: 'foo foo foo foo foo foo foo foo',
      state: 'California',
    }),
  }
</script>