Vuetify.js - inside can't be focused without disappearing

Question

Consider the following layout:

<v-menu>
    <span slot="activator">Open dropdown</span>
    <v-list>
        <v-list-tile @click=""><v-list-tile-title>Menu item 1</v-list-tile-title></v-list-tile>
        <v-list-tile @click=""><v-list-tile-title>Menu item 2</v-list-tile-title></v-list-tile>
        <v-list-tile @click=""><v-list-tile-title>Menu item 3</v-list-tile-title></v-list-tile>
        <v-list-tile @click=""><v-text-field label="Search" append-icon="search"></v-text-field></v-list-tile>
    </v-list>
</v-menu>

This renders a "button" to open a dropdown menu, with 3 menu items and a text input field for search as the 4th item. The issue is that focusing on the text field automatically collapses the menu. All help appreciated, thanks in advance.

Change `@click` to `@click.stop` on last `v-list-tile` I guess — Traxo, Oct 11 '18 at 12:58
Sorry, my mistake - `@click` shouldn't even be present for the last `v-list-tile` item, a copying error. — Ed Weird, Oct 11 '18 at 13:06
Nevertheless, `@click.stop` solves the issue and is the correct answer, thanks a bunch @Traxo ! — Ed Weird, Oct 11 '18 at 13:08

score 1 · Accepted Answer · answered Mar 09 '20 at 17:13

Just add :close-on-click="false" or :close-on-content-click="false"

<v-menu  :close-on-content-click="false"  :close-on-click="false">
    <span slot="activator">Open dropdown</span>
    <v-list>
        <v-list-tile @click=""><v-list-tile-title>Menu item 1</v-list-tile-title></v-list-tile>
        <v-list-tile @click=""><v-list-tile-title>Menu item 2</v-list-tile-title></v-list-tile>
        <v-list-tile @click=""><v-list-tile-title>Menu item 3</v-list-tile-title></v-list-tile>
        <v-list-tile @click=""><v-text-field label="Search" append-icon="search"></v-text-field></v-list-tile>
    </v-list>
</v-menu>

Thanks! I'm not working with the thing I needed that for for more than a year now, but anyways. Also, is this something that was added to Vuetify recently, less than one and a half years ago? — Ed Weird, Mar 10 '20 at 22:25

Vuetify.js - inside can't be focused without disappearing

1 Answers1