[Bug Report] Activator click event should not propagate (v-menu, v-dialog, etc..)

[sindrepm]

Versions and Environment

Vuetify: 1.0.1 Vue: 2.5.13 Browsers: Chrome 64.0.3282.167 OS: Windows 7

Steps to reproduce

Create a component/element and hook up the click event. Add a v-menu component with a button in the activator slot.

Expected Behavior

Click on the activator button should only open the menu and not trigger the parent component's click event handler.

Actual Behavior

When using components that support the "activator" slot, such as v-menu or v-dialog, the click event does not stop propagation so any listeners bound on parent components fires as well.

This is a problem for example when a menu is attached to list items or table rows, where the item itself is clicked when just trying to open the menu.

I think the activator click event should use the .stop modifier to prevent event propagation.

Reproduction Link

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

Other comments

One possible workaround is to use the v-model option instead, but this becomes messy when dealing with multiple activators e.g. in lists.

[KaelWD]

Dialogs already do this correctly.

Workaround for menus: <v-menu @click.native.stop>

[sindrepm]

@KaelWD Awesome, thanks!

[MtDalPizzol]

I can confirm tat this bug is happening also on version 1.0.0. @KaelWD workaround worked perfectly.

[tafel]

There's a problem using v-menu inside a v-list in conjunction with VueRouter. It seems the @click.native.stop hack isn't enough in this case.

https://codepen.io/anon/pen/MGPRrO?editors=1111

EDIT: with router's mode to history, the page is reloaded, with router's mode standard, the v-menu doesn't open and app goes to the configured tile route

[tafel]

I think I found the right thing to do: @click.native.stop.prevent works fine for me in this case, but I don't know if there're undesired side-effects.

[loykianos]

None of the above solutions worked for me.

In the end, I managed to make it work by adding a @click.stop in the v-btn element.

[jasonwilczak]

I just want to add in that I've run into this issue with the v-calendar component as well. I needed to use the work-around to be able to click the white space in the calendar independently of a date slot item. Here is my stackoverflow post with a link to the codepen as well: stackoverflow

[johnleider]

Thank you everyone for your patience on this. Somehow got swept under the rug.