[Bug Report] VRipple - NotFoundError: The object can not be found here.

[ascott18]

Environment

Vuetify Version: 2.4.9
Vue Version: 2.6.11
Browsers: Safari (Mobile Safari UI/WKWebView 14.4)
OS: iOS

Steps to reproduce

Unable to reproduce myself - this is an error from a user's device that was captured by our error logs. Not even sure what conditions reproduce this. However, we're seeing this error in the error logs for our production app, and it seems clear enough what's going on -

vuetify/packages/vuetify/src/directives/ripple/index.ts

Line 151 in ed6f621

animation.parentNode && el.removeChild(animation.parentNode)

is removing a node from a specific parent when that parent doesn't seem to own the node anymore.

Expected Behavior

No errors

Actual Behavior

Error: NotFoundError: The object can not be found here.
    window.onerror@webpack:///node_modules/vuetify/dist/vuetify.js:33440:47

This is the full stack trace - there is no more detail in the logs than this. This line maps to

vuetify/packages/vuetify/src/directives/ripple/index.ts

Line 151 in ed6f621

animation.parentNode && el.removeChild(animation.parentNode)

Reproduction Link

No reproduction link, unfortunately. I think this should be fixable without a repro by just adding a check that the element being removed does belong to the parent it is being removed from before removing it.

Other comments

[ascott18]

Found another instance of this in our logs, this time with a more detailed error message but the same stack trace, from Chrome Mobile WebView 90.0

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

[ellis2323]

Same here. I use v2.4.11 on Brave brower (w10 x86_64).

index.ts?5ffe:151 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at eval (webpack-internal:///./node_modules/vuetify/lib/directives/ripple/index.js:160:36)
eval @ index.ts?5ffe:151
setTimeout (async)
eval @ index.ts?5ffe:144
setTimeout (async)
hide @ index.ts?5ffe:139
rippleHide @ index.ts?5ffe:227

[andysoa]

This issue is also leading our sentry rank.

[ellis2323]

Add a strange behavior: I have the bug with Brave only when I use "Inspector" and simulate a mobile device.

In this case, the bug appears when I click on the green + button.

If I add ":ripple="false" in the green or yellow button (the + & -), no problem.

[reynard80]

Happens here as well when buttons are hidden in a v-if.
:ripple="false helps, but can't be used on 'text' buttons (due to the UX being broken then)

[qngl]

Got the same issue in iOS with version 2.6.1. I think it's caused by the delayed clean up code on ripple animation.
setTimeout((function(){var e=t.getElementsByClassName("v-ripple__animation");1===e.length&&t.dataset.previousPosition&&(t.style.position=t.dataset.previousPosition,delete t.dataset.previousPosition),n.parentNode&&t.removeChild(n.parentNode)}),300)

[MJDeligan]

Still happening in 3.0.0-beta.9 in Brave and Chrome mobile simulation when using buttons within a card that has the to-prop. @click.prevent does not prevent the card from rippling when the button is clicked.

Reproduction code pen

Works as expected in Firefox.

[Freezon]

Steps to reproduce:

1. MouseDown on button
2. Drag outside the button area
3. Have a bug 🐛

[fjf2002]

I am removing a <v-list-item> using a "remove me" <v-btn> that is inside the very same <v-list-item>. On Desktop-Chrome, no problem. When I use mobile chrome and I tap fast and on multiple such buttons: quite reproducibly the error message in the title is shown.

vuetify version 3.0.0-beta.10. If I add :ripple="false" to the <v-btn>, problem solved.