Vuetify append item to select menu not selecting as normal item

Question

I have a simple select menu using Vuetify (Vue 2.0) seen in fiddle here:

The option is added, but the menu does not close and select like the other options and the menu stays open

My reference is from the Vuetify docs: https://vuetifyjs.com/en/components/selects

under 'prepend/append item slots

<div id="app">
    <v-app dark>
        <v-select
          :items="items"
          clearable
          v-model='selectedItem'
          label="...will 'four' close menu?"
        >

          <template v-slot:append-item>
            <v-divider class="mb-2"></v-divider>
            <v-list-tile >
              <v-list-tile-content>
                four
              </v-list-tile-content>
            </v-list-tile>
          </template>

        </v-select>

    </v-app>
</div>

var vm = new Vue({
    el: "#app",

    data: {
        items: ["one", "two", "three"],
        selectedItem: ''
    }
});

In provided jsfiddle, you are using sightly outdated vuetify v0.14.8 and referencing to docs at v1.5.14 what could cause troubles. — m1k1o

mattyd mattyd · Accepted Answer · 2019-06-06T18:51:08

I received an answer from Vuetify devs:

I needed to add: :menu-props="{closeOnContentClick: true}"

<v-select
      :items="items"
      clearable
      v-model='selectedItem'
      :menu-props="{closeOnContentClick: true}"
      label="...will 'four' close menu?">

Vuetify append item to select menu not selecting as normal item

2 Answers