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

ascott18 commented 3 years ago

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 - https://github.com/vuetifyjs/vuetify/blob/ed6f621f9f9086382c2894ea695355ae0bdd1ab8/packages/vuetify/src/directives/ripple/index.ts#L151 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 https://github.com/vuetifyjs/vuetify/blob/ed6f621f9f9086382c2894ea695355ae0bdd1ab8/packages/vuetify/src/directives/ripple/index.ts#L151

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

This issue is also leading our sentry rank.

ellis2323 commented 3 years ago

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.

bug

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

reynard80 commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Steps to reproduce:

MouseDown on button
Drag outside the button area
Have a bug 🐛

fjf2002 commented 2 years ago

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.

vuetifyjs / vuetify