[Bug Report] v-list-item ripple effect gets triggered when you click on v-list-item-action

[AssetKid]

Environment

Vuetify Version: 2.0.0
Last working version: 1.5.16
Vue Version: 2.6.10
Browsers: Mozilla Firefox, Google Chrome
OS: Windows, Mac OSX

Steps to reproduce

Click v-list-item-action on the demos linked below

1.5.16 - https://codepen.io/anon/pen/YmWWWb
2.0 - https://codepen.io/anon/pen/EqyyyR

Expected Behavior

Ripple effect should only be on v-list-item-action

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

Actual Behavior

Ripple effect is triggered for both v-list-item and v-list-item-action

Reproduction Link

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

Other comments

This is a regression from 1.5.x. Not sure if it is a feature or bug.

[johnleider]

Not really sure how we can efficiently fix this. v-list-item supports ripple now by default. If the same would have been the case for v1.5, it would have been experienced there as well.

https://codepen.io/johnjleider/pen/bXweXq

[WIStudent]

For anyone looking for a workaround, I fixed this issue by stopping the propagation of the mousedown and touchstart event inside the action:

<v-list-item :to="someRoute">
  <v-list-item-content>
      <v-list-item-title>Title</v-list-item-title>
  </v-list-item-content>

  <v-list-item-action>
    <v-btn icon @click.prevent="delete" @mousedown.stop @touchstart.native.stop>
      <v-icon>delete</v-icon>
    </v-btn>
  </v-list-item-action>
</v-list-item>

@click.prevent prevents the v-list-item from routing to someRoute when clicking on the button inside the action.

[seankenny]

I think this may have caused an IE11 bug Out of stack space. Pretty straightforward to repro assuming you have access to IE11 - open in IE11 and click any component with a ripple directive and you will see the issue immediately in the console.

[johnleider]

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.

If you have any additional questions, please reach out to us in our Discord community.