Vuetify: Datatable row click stop propagation

Created on 30 Aug 2017  路  5Comments  路  Source: vuetifyjs/vuetify

Steps to reproduce

Declare a datatable by adding a click event on the row and adding a menu button in the datatable column

Versions


Vue 2.4.1
Vuetify 0.14.11

What is expected ?

How should I declare the menu so that I can give a stop propagation on it by stopping the click on the table row

What is actually happening ?

Is running both, click on the line and the menu opens

Reproduction Link

https://codepen.io/FilippiSilva/pen/VzqeRB

help wanted

Most helpful comment

Solved by using @click.stop to stop propagation

All 5 comments

This has to be reverted. It brings up additional issues that must be accounted for. The select generators has to change its functionality, as well as, the propagation closed other menus, with this change, menus will stay up even if you click another activator.

How should I declare the menu so that I can give a stop propagation on it by stopping the click on the table row

A possible workaround would be to check if the button was clicked before running the event handler: https://codepen.io/anon/pen/zdeExZ

After careful consideration, this is something that will have to be left up to the developer to handle. Reason being, you have nested click events and the propagation of the activator is absolutely necessary for other functionality required in the framework, such as other menus closing when another opens, due to be able to consume the click event propagated from the incoming menu.

Solved by using @click.stop to stop propagation

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

Was this page helpful?
0 / 5 - 0 ratings