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

[Bug Report][3.5.14] AutoComplete @update:search triggered on click #19543

Closed
Assignees
Labels
C: VAutocomplete VAutocomplete T: bug Functionality that does not work as intended/expected

Comments

@augustoeliezer
Copy link

Environment

Vuetify Version: 3.5.14
Vue Version: 3.4.21
Browsers: Edge 123.0.0.0
OS: Windows 10

Steps to reproduce

Choose one in autocomplete
Click outside autocomplete
Search occurs two/three times when its have no focus

Expected Behavior

this event might be only triggered on type in search field

Actual Behavior

Its triggered on click in autocomplete, on choose one item and when clicking outside the autocomplete

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

<template>
  <v-app>
    <v-container class="mx-2">
      <v-row>
        <v-col>
          <v-autocomplete
            :items="list"
            density="compact"
            label="Label"
            title="Choose one"
            variant="outlined"
            v-model="model"
            item-title="n"
            item-value="id"
            hide-no-data
            @update:search="handleSeach"
          ></v-autocomplete>
        </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 list = ref([{n: 'Choose one', id: 0},{ n: 'test', id: 1 }, { n: 'test2', id: 2 }, { n: 'test3', id: 3 }])

  function handleSeach(value: string) {
    searchCount.value++
    console.log(value)
  }
</script>
@yuwu9145 yuwu9145 self-assigned this Apr 9, 2024
@yuwu9145 yuwu9145 added T: bug Functionality that does not work as intended/expected C: VAutocomplete VAutocomplete and removed S: triage labels Apr 9, 2024
@elkofy
Copy link
Contributor

elkofy commented Apr 27, 2024

I tried to fix this bug but I think there is a major problem for resolving this issue.
To put it simply the value inside of the input has to be empty when the component is out of focus. So the search value gets reset when out of focus and since the search value is bind to the v-model you can't really change it without reworking how the component works.
This is just what I figured out when working on it.
I had the intention to prevent the event to be emitted when the value change but i can't get it to work.

johnleider pushed a commit that referenced this issue May 7, 2024
…ips/selection shots (#19701)

resolves #19543

Co-authored-by: Yuchao Wu <yuchao.sydneyuni@gmail.com>
@augustoeliezer
Copy link
Author

Two or more searches fixed in Vuetify@3.6.4

Last doubt

On choose one item in list it shoulded trigger the search event?

I think it should be when typing

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