CODEWITHSUNDEEP
vuetify.js
DrHouse82
DrHouse82

Reputation: 43

v-autocomplete formatting / blur behavior

I want to use icons of different colors in my v-autocomplete. I formatted both the v-slot:item and v-slot:selection accordingly.

<v-autocomplete :items="itemList" v-model="selectedValue">
    <template v-slot:selection="{ props, item }">
        <v-icon size="small" :color="item.raw.color" class="mr-3 pt-1">mdi-circle</v-icon>
        {{item.title}}            
    </template>
    <template v-slot:item="{ props, item }">
        <v-list-item v-bind="props">
            <template v-slot:prepend>
                <v-icon :color="item.raw.color" class="mr-3">mdi-circle</v-icon>
            </template>                
        </v-list-item>
    </template>
</v-autocomplete>

https://codepen.io/drhouse82/pen/yLjqZeN

When I choose an item from the select-list, the dropdown closes and the input field shows the text only. When I then click outside the autocomplete (in order to blur it), the formatting is adjusted as intended.

What can I do to have the formatting (with icon) directly after selecting an item? Is it possible to automatically blur upon modelValue-change?

Upvotes: 1

Views: 857

Answers (1)

Alexander Shkirkov
Alexander Shkirkov

Reputation: 3857

I suppose you are using Vuetify 3.0.0-beta.11, as provided in CodePen.

You can call global blur event manually using @update:modelValue event of <v-autocomplete>:

<v-autocomplete
  :items="itemList"
  v-model="selectedValue"
  @update:modelValue="blurHandler">
...
</v-autocomplete>
...
methods: {
  blurHandler() {
    document.activeElement.blur()
  }
}

CodePen demo

Upvotes: 1

Related Questions