Vuetify: [Bug Report] v-autocomplete value not displayed if not in selected items (async)

[ilgala]

Versions and Environment

Vuetify: 1.5.5
Vue: 2.6.10
Browsers: Chromium 75.0.3770.90
OS: Ubuntu undefined

Steps to reproduce

I've integrated v-autocomplete on a custom form component and a value prop is passed in order to show available items. In detail, I'm using this custom component to load the user roles with an async call to the backend.

When I'm updating a user, it's roles are present in the model and the custom component "preloads" 5 items to show a little list when opening the autocomplete. But, if the roles are not present in these 5 elements, the chip is not shown.

Expected Behavior

In the code pen I've called the props items "Item 4" and "Item 5", and on mounted function I preload items from 1 to 4 (excluding element 5) and I'd like to see 2 chips, the first for item 4, the second for item 5. When showing the items list, Items from 1 to 3 should be displayed (since hide-selected is setted to true).

Actual Behavior

The autocomplete is showing items from 1 to 3 as expected, but it's present only one chip, the one of "Item 4", present in the preloaded list.

Reproduction Link

https://codepen.io/ilgala/pen/KjaXaa

Other comments

At the moment, as a workaround in the preload phase, i send an async request to the server with also the selected values, in order to include the "Item 5" otherwise it won't be visible.

[mitosch]

I discovered the same issue and found a different workaround (thanks to your comment):

In my setup, it wasn't possible to use the mounted function. The component (a dialog with a form) was reused for updating different data entries.

Another workaround

Instead of sending a request with the (already) known value(s), the values can be pushed into the items before.

Code

  watch: {
    dialog (value) {
      // dialog opened (value is true) in edit mode (editedIndex > -1)
      if (value && this.editedIndex > -1) {
        // checks for a predefined value of the autocomplete v-model
        if (this.select && this.select.length > 0) {
          this.items.push(this.select)
        }
      }
    },

    search (val) {
      // if value was removed (clearable), deleted (backspace) or no initial value was given
      if (! val || val.length == 0) {
        this.items = []
        return
      }

      // call your API with the search query and update: this.items = request.data
    }
  },

Code is adapted to the Asynchronous items example.

Description

• The dialog watcher was the right place for my setup to preload the items (edit-dialog with v-autocomplete was opened for a data entry)
• By updating the items array, the API is automatically called by the search watcher

Maybe this helps somebody and thank you for your hint (workaround at mounted).

[ilgala]

Another workaround

Instead of sending a request with the (already) known value(s), the values can be pushed into the items before.

This is a nice workaround... Very simple and doesn't require to fetch additional data from the backend.. But It requires also a watcher for the selection... At least in my case where the selection may change.

Let's say, for example, that you have an array of categories and an array of selected products preloaded in 2 different autocomplete. The products autocomplete may change the preloaded selection depending on the category, so it's required an additional watcher. Also, your workaround considers only a "single" selected model, but it may be an array.

here is a little update of your methods. Anyway I think this should be a "native" feature of the autocomplete (and that's why I've opened this bug report):

watch: {
  dialog(value) {
    // dialog opened (value is true) in edit mode (editedIndex > -1)
    if (value && this.editedIndex > -1) {
      // checks for a predefined value of the autocomplete v-model
      this.setItems(this.select)
    }
  },
  search(value) {
    // if value was removed (clearable), deleted (backspace) or no initial value was given
    if (!value || value.length == 0) {
      this.items = []
      return
    }

    // call your API with the search query and update: this.items = request.data
  },

  select(value) {
    // dialog opened (value is true) in edit mode (editedIndex > -1)
    if (value && this.editedIndex > -1) {
      this.setItems(this.select)
    }
  }
},

methods: {
  setItems(value) {
    if (value && value.length > 0) {
      if(Array.isArray(value)) {
        // I'm not sure this is the best solution... But for this answer I think it's enough
        this.items = value
      } else {
        this.items.push(value)
      }          
    }
  }
}

[KaelWD]

Duplicate of #4000