Vuetify: [Bug Report] Regression caused by #6431 - search input gets nulled immediately when using an `item-text` function + ajax loading

[ascott18]

Versions and Environment

Vuetify: 1.5.3
Last working version: 1.5.0
Vue: 2.6.7
Browsers: Chrome 72.0.3626.119
OS: Windows 7

Steps to reproduce

Create a v-autocomplete that uses a function for :item-text. Bind :search-input.sync, watch the bound property, and use that to perform an AJAX load of data.

Then, type some characters into the search input.

Expected Behavior

Search works as normal

Actual Behavior

No input appears. The watcher for the search property gets a single character that was typed in, and then immediately afterwards, gets set to null.

Reproduction Link

https://codepen.io/anon/pen/droBmr

Other comments

Caused by https://github.com/vuetifyjs/vuetify/pull/6431

The watcher on itemText is causing the search input to be reset.

[Kovalchuk91]

I've faced the same bug recently, was able to deal with it by merging array with selected values with the list that comes from API into Set (to avoid duplicates). Maybe it can help someone before it gets fixed:

<template>
    <v-autocomplete
            v-model="selectedItems"
            :items="Array.from(items)"
            :search-input.sync="search"
            label="Items"
            item-text="title"
            clearable
            multiple
    />
</template>

methods: {
      handleSearch () {
        getItems({ search: this.search })
          .then(response => {
            this.items = new Set(this.selectedItems);
            response.data.items.map(item => this.items.add(item));
          });
      }
    }

[meteorlxy]

Same problem here. I have to roll back to 1.5.0 now.

[johnleider]

This really is just a product of how Vue binds inline functions. This can also causes anomalies when binding the items prop inline. The recommended way to handle this is by creating a function for *item-text and bind that.

https://codepen.io/johnjleider/pen/NWKXNmg