Vuetify clear autocomplete input programmatically

Question

can you take a look on this pen:

https://codepen.io/slayerbleast/pen/mdJMqwz

Why when you click on reset, it actually sets the input = null but on the input it's still showing the old value. You can get the real value clicking the other btn.

I'd would like to reset the autocomplete input with another btn like this pen instead of the clearable btn.

I tried to add: :search-input.sync="input"

But it causes undesired side effects... (for example it triggers the form validation automatically although it has lazy-validation attribute.

What do you think? Seems a bug? Setting the model to null should clear the input too.

Found the bug: https://github.com/vuetifyjs/vuetify/issues/10688

Richard Matsen Richard Matsen · Accepted Answer · 2020-03-05T12:25:25

As noted in comments, this behavior changes in v2.2.15. The release notes show that the change is deliberate,

VAutocomplete: check for inital search input prop (#10642) (e09c916), closes #9757 #9757 #9757

Specifically, the code that changes is the VAutocomplete method setSearch()

setSearch () {
  // Wait for nextTick so selectedItem
  // has had time to update
  this.$nextTick(() => {
    if (
      !this.multiple ||
      !this.internalSearch ||
      !this.isMenuActive
    ) {
      this.internalSearch = (
        !this.selectedItems.length ||
        this.multiple ||
        this.hasSlot
      )
        ? this.internalSearch || null       // "? null" in v2.2.14
        : this.getText(this.selectedItem)
    }
  })
},

If you're happy with 'patching' within your app, this can be reversed by using a reference on the autocomplete

<template>
  <div>
    <v-autocomplete ref="autocomplete" v-model="input" :items="items" clearable></v-autocomplete>
    <v-btn @click="reset">reset</v-btn>
    <v-btn @click="value">get value</v-btn>
    <div>{{input}}</div>
  </div>
</template>

<script>
export default {
  name: "playground",
  data: () => ({
    input: null,
    items: ["a", "b", "c", "d"]
  }),
  mounted() {
    console.clear();
    console.log(this.$refs);
  },
  methods: {
    value() {
      alert("value: " + this.input);
    },
    reset() {
      this.$nextTick(() => {
        this.input = null;
        this.$refs.autocomplete.internalSearch = null;
      })
    }
  }
};
</script>

Codesandbox

Vuetify clear autocomplete input programmatically

1 Answers