Vuetify: Any way to prevent event bubbling (propagation) of v-btn?

[kuanyui]

Is there any way to prevent the event propagation os a v-btn, when as an activator of a v-menu?

.root(@click="doSomethingOther")
  v-menu(bottom left)
    v-btn(slot="activator")   // When clicking this button, the click event will bubble up to `.root` also...
      v-icon more_vert
    v-list
      v-list-tile
        v-list-tile-title ....

[KaelWD]

Read the documentation please: https://vuejs.org/v2/guide/events.html#Event-Modifiers

The issue list of this repo is exclusively for bug reports and feature requests. For general questions, please join the Discord chat room. You can also check reddit or stackoverflow.

[kuanyui]

Thanks for replying :pray: Sorry I opened this issue because I don't sure if this is a missing feature:

Thought there are event modifiers in Vue itself, but for a v-btn acting as an activator within a v-menu, if you put @click.prevent="WHATEVER" on a v-btn, this will result to v-btn unable to trigger the outer v-menu.

BTW, currently, I can only think out this dirty workaround:

.root(@click="doSomethingOther")
  .event-stopper(@click.stop="")  // catch the click event
    v-menu(bottom left)
      v-btn(slot="activator") 
        v-icon more_vert
      v-list
        v-list-tile
          v-list-tile-title ....

[KaelWD]

v-menu(@click.stop)

3333

[kuanyui]

v-menu(@click.stop)

3333

Sorry, this seems not to work:
https://codepen.io/anon/pen/WaOYEy?editors=1111

[KaelWD]

My bad, @click.native.stop

[RabbidDog]

what the @click.stop="" will do is prevent the event from propagating upwards and execute nothing .
So my hack is to encapsulate the v-menu in another element e.g. v-list-tile-action (the menu is a list of actions on a list item) and have some thing like this
<v-list-tile-action @click.stop=""> <v-menu offset-y> <v-btn slot="activator" flat icon color="grey" > <v-icon>more_horiz</v-icon> </v-btn> </v-menu> </v-list-tile-action>

[blalan05]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

 
Thank you for your contribution and interest in improving Vuetify.