Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from Mar 3, 2024

Conversation

yuwu9145
Copy link
Member

@yuwu9145 yuwu9145 commented Mar 2, 2024

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>

@yuwu9145 yuwu9145 enabled auto-merge (squash) March 3, 2024 02:12
@yuwu9145 yuwu9145 disabled auto-merge March 3, 2024 02:13
@yuwu9145 yuwu9145 merged commit d3bafd8 into master Mar 3, 2024
17 of 19 checks passed
@yuwu9145 yuwu9145 deleted the fix-19279 branch March 3, 2024 02:13
@johnleider johnleider added this to the v3.5.x milestone Mar 3, 2024
@johnleider johnleider added T: bug Functionality that does not work as intended/expected C: VCombobox VCombobox C: VAutocomplete VAutocomplete labels Mar 3, 2024
VIXI0 pushed a commit to VIXI0/vuetify that referenced this pull request Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VAutocomplete VAutocomplete C: VCombobox VCombobox T: bug Functionality that does not work as intended/expected
Projects
None yet
2 participants