Skip to content

Conversation

@ikushum
Copy link
Member

@ikushum ikushum commented Jan 22, 2026

fixes #21938

Description

Restore v2 behaviour where VAutocomplete and VCombobox input value would auto-select on focus

Markup:

<template>
  <v-container>
    <h2 class="text-h5 mb-4">Auto-select text on focus demonstration</h2>
    <p class="text-body-2 mb-6 text-medium-emphasis">
      In single-select mode (without chips), clicking on the input selects the text for easy replacement.
      Try: select an item, then click on the input again - the text should be selected.
    </p>

    <v-row>
      <v-col cols="12" md="6">
        <h3 class="text-subtitle-1 font-weight-bold mb-2">✅ VAutocomplete - Single select</h3>
        <p class="text-caption text-medium-emphasis mb-2">Text IS selected on focus</p>
        <v-autocomplete
          v-model="autocompleteValue"
          :items="simpleItems"
          hint="Text should be selected when you click again"
          label="Click, select item, click again"
          persistent-hint
        />
      </v-col>

      <v-col cols="12" md="6">
        <h3 class="text-subtitle-1 font-weight-bold mb-2">✅ VCombobox - Single select</h3>
        <p class="text-caption text-medium-emphasis mb-2">Text IS selected on focus</p>
        <v-combobox
          v-model="comboboxValue"
          :items="simpleItems"
          hint="Text should be selected when you click again"
          label="Click, select item, click again"
          persistent-hint
        />
      </v-col>
    </v-row>

    <v-divider class="my-8" />

    <h3 class="text-h6 mb-4">Cases where text is NOT selected</h3>
    <p class="text-body-2 mb-6 text-medium-emphasis">
      When using chips, multiple mode, or selection slots, the input is typically empty
      so text selection doesn't apply.
    </p>

    <v-row>
      <v-col cols="12" md="6">
        <h3 class="text-subtitle-1 font-weight-bold mb-2">❌ VAutocomplete - Multiple</h3>
        <p class="text-caption text-medium-emphasis mb-2">Text NOT selected (input is empty)</p>
        <v-autocomplete
          v-model="autocompleteMultiple"
          :items="simpleItems"
          hint="Input is empty, selection shown separately"
          label="Multiple select mode"
          multiple
          persistent-hint
        />
      </v-col>

      <v-col cols="12" md="6">
        <h3 class="text-subtitle-1 font-weight-bold mb-2">❌ VAutocomplete - Chips</h3>
        <p class="text-caption text-medium-emphasis mb-2">Text NOT selected (uses chips)</p>
        <v-autocomplete
          v-model="autocompleteChips"
          :items="simpleItems"
          hint="Selection shown as chip, input is empty"
          label="Single select with chips"
          chips
          persistent-hint
        />
      </v-col>
    </v-row>

    <v-row class="mt-4">
      <v-col cols="12" md="6">
        <h3 class="text-subtitle-1 font-weight-bold mb-2">❌ VCombobox - Multiple + Chips</h3>
        <p class="text-caption text-medium-emphasis mb-2">Text NOT selected (multiple + chips)</p>
        <v-combobox
          v-model="comboboxMultipleChips"
          :items="simpleItems"
          hint="Selections shown as chips"
          label="Multiple with chips"
          chips
          closable-chips
          multiple
          persistent-hint
        />
      </v-col>

      <v-col cols="12" md="6">
        <h3 class="text-subtitle-1 font-weight-bold mb-2">✅ Tab navigation test</h3>
        <p class="text-caption text-medium-emphasis mb-2">Tab into this field to test</p>
        <v-text-field
          hint="Tab to the autocomplete below"
          label="Focus me first, then Tab"
          persistent-hint
        />
        <v-autocomplete
          v-model="tabTestValue"
          :items="simpleItems"
          class="mt-4"
          hint="Text should be selected when tabbing in"
          label="Tab into me"
          persistent-hint
        />
      </v-col>
    </v-row>

    <v-divider class="my-8" />

    <h3 class="text-h6 mb-4">Current values</h3>
    <v-row>
      <v-col cols="12">
        <pre class="text-caption bg-grey-lighten-4 pa-4 rounded">{{
          {
            autocompleteValue,
            comboboxValue,
            autocompleteMultiple,
            autocompleteChips,
            comboboxMultipleChips,
            tabTestValue,
          }
        }}</pre>
      </v-col>
    </v-row>
  </v-container>
</template>

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

  const simpleItems = [
    'California',
    'Colorado',
    'Florida',
    'Georgia',
    'Texas',
    'Wyoming',
  ]

  const autocompleteValue = ref('California')
  const comboboxValue = ref('Colorado')
  const autocompleteMultiple = ref(['Florida', 'Georgia'])
  const autocompleteChips = ref('Texas')
  const comboboxMultipleChips = ref(['Wyoming'])
  const tabTestValue = ref('California')
</script>

@ikushum ikushum requested a review from a team January 22, 2026 18:37
@ikushum ikushum self-assigned this Jan 22, 2026
@ikushum ikushum added T: enhancement Functionality that enhances existing features C: VCombobox C: VAutocomplete labels Jan 22, 2026
@J-Sek J-Sek force-pushed the fix/select-on-focus branch from add99c4 to d4d6f08 Compare February 10, 2026 22:36
@J-Sek
Copy link
Contributor

J-Sek commented Feb 10, 2026

The implementation is OK, but I don't see the reason for making this change (author of the issue only stated it is "different in v2" so should be reverted). I can easily imagine someone else tabbing over a form being surprised that some fields auto-select text within while other don't - leading to a bug report in a matter of weeks. If we cannot find a strong argument, let's close the issue with "working as intended"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

C: VAutocomplete C: VCombobox T: enhancement Functionality that enhances existing features

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] VAutocomplete, VCombobox input text auto-selection on focus (like in v2)

2 participants