vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

fix(AutoComplete): don't alter search value when out of focus

Open elkofy opened this issue 10 months ago • 0 comments

Description

I removed the trigger of the search event when element is out focus.

resolves #19543

Markup:

<template>
  <v-app>
    <v-container class="mx-2">
      <v-row>
        <v-col>
          <v-autocomplete
            v-model="model"
            :items="lista"
            density="compact"
            item-title="n"
            item-value="id"
            label="Label"
            title="Choose one"
            variant="outlined"
            hide-no-data
            @update:search="handleSearch"
          />
        </v-col>
        <v-col>
          <v-btn @click="searchCount = 0">Clean Search Count</v-btn>
        </v-col>
        <v-col>Model: {{ model }} Search Count: {{ searchCount }}</v-col>
      </v-row>
      <v-row>
        <v-col>
          <ol>
            <li>Choose one in list</li>
            <li>Click outside autocomplete</li>
            <li>Search occurs two times</li>
          </ol>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const model = ref(0)
  const searchCount = ref(0)
  const lista = ref([{ n: 'Choose one', id: 0 }, { n: 'test', id: 1 }, { n: 'test2', id: 2 }, { n: 'test3', id: 3 }])

  function handleSearch (value: string) {
    searchCount.value++
    console.log(value)
  }
</script>

elkofy avatar Apr 26 '24 14:04 elkofy