Vuetify: Cannot embed a v-menu inside of a v-list-tile without triggering v-list-tile's clickhandlers.

[radicaled]

Steps to reproduce

Create a <v-list-tile> element and add a <v-menu> inside of its <v-list-tile-action>

Versions

0.16.7

What is expected ?

You should be able to click on the v-menu without triggering the click handler for the v-list-tile

What is actually happening ?

Because v-menu does not stop its event propagation when its activator element is triggered, the v-list-tile receives the click event and performs behavior like selecting an item or navigating away from the page, instead of showing the v-menu.

Reproduction Link

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

[KaelWD]

Use @click.stop on the v-list-tile-action

https://codepen.io/anon/pen/gGqLJG?editors=1011

[jmjf]

Thanks. This was exactly what I needed for a different application.

Use case: I need to let a user select software packages from a list and enter the specific version they're installing for each selected package.

The template ends up like this (simplified sketch):

<v-select multiple chip ...>
  <template slot="selection">v-chip to display software package name + version with close</template>
  <template slot="item"...>
    <v-list-tile-content>Software packages from select items</vlist-tile-content>
    <v-list-tile-action @click.stop><v-text-field label="Version"></v-text-field></v-list-tile-action>
  </template>
</v-select>

@click.stop lets v-text-field get focus so the user can enter the package name.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord