Vuetify: [Bug Report] Ripple directive JS Error

[Tofandel]

Environment

Vuetify Version: 2.3.3
Vue Version: 2.6.11
Browsers: Chrome 83.0.4103.116
OS: Linux x86_64

Steps to reproduce

Unknown

Expected Behavior

No error

Actual Behavior

JS Error

Other comments

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
This happens in the hide method of the ripple directive

hide (el: HTMLElement | null) {
    if (!el || !el._ripple || !el._ripple.enabled) return

    const ripples = el.getElementsByClassName('v-ripple__animation')

    if (ripples.length === 0) return
    const animation = ripples[ripples.length - 1]

    if (animation.dataset.isHiding) return
    else animation.dataset.isHiding = 'true'

    const diff = performance.now() - Number(animation.dataset.activated)
    const delay = Math.max(250 - diff, 0)

    setTimeout(() => {
      animation.classList.remove('v-ripple__animation--in')
      animation.classList.add('v-ripple__animation--out')
      opacity(animation, 0)

      setTimeout(() => {
        const ripples = el.getElementsByClassName('v-ripple__animation')
        if (ripples.length === 1 && el.dataset.previousPosition) {
          el.style.position = el.dataset.previousPosition
          delete el.dataset.previousPosition
        }

        animation.parentNode && el.removeChild(animation.parentNode) //HERE
      }, 300)
    }, delay)
  },

It doesn't seem to be causing any issues only a JS error

I cannot manage to make a minimum reproduction setup as there is no stack trace because it's a directive method and I could not find exactly what mix of elements is causing the error

I just have a stepper and a few fields (checkbox, text, select) and 2 buttons

This error happens when I dynamically show or hide fields when clicking on one button but unfortunately I cannot reproduce this issue in codepen.. (I think when I click on the button, the ripple is triggered and the button parent is rerendered removing the previous render's dom, triggering the error)

[MajesticPotatoe]

You've submitted an issue that does not contain a reproduction. In order to effectively disposition this, we need to verify that the problem exists outside of your environment. This issue will be tagged as needs reproduction for the next 14 days before being closed.

You can find information on how to contribute to vuetify here.

Services to create a reproduction:

• Codepen
• Codepen w/Router
• Codesandbox
• JSFiddle
• A small reproduction repository

Thank you for your contribution and interest in improving Vuetify.

[Tofandel]

As I explained, I cannot manage to reproduce on codepen (project uses vuetify loader and tons of other things not available there) but I can provide a link to a page where it happens with Vue devtools enabled

[jacekkarczmarczyk]

There's also codesandbox or you can prepare github repository, make sure first that the reproduction is as minimal as possible without any code that is not relevant to the issue

[Tofandel]

I tried both, I can't reproduce there, I located the issue to be only when vuetify loader is used and removing a button from the dom (v-if) after it's been clicked

I'll try to make a repo later if I have time

[stepanho]

Sorry for interrupting.
I'm faced with same issue.
Component code:
<v-btn :color="saveButtonColor" :loading="saveStatus === 'L'" v-text="saveButtonText" @click="saveCheckList" />

Error occurs after some time (100-500ms) after click.
After troubleshooting I got that it's related with changing "v-text" or ":loading" values.
Changing other properties doesn't make that behaviour.

_Version:
Windows 7
Node 13.14.0
vue 2.6.11
vuetify 2.3.4
vuetify-loader 1.6.0_

[stepanho]

I made some troubleshooting.
Error occurs only if both of "loading" and "v-text" changes at the same time (in ~100ms).
Separately - no errors.

[KaelWD]

Don't use v-text on components.

[stepanho]

Don't use v-text on components.

Why?

[KaelWD]

Because it overwrites any other elements the component renders:

[stepanho]

@KaelWD Thank you, it fixes that issue.
I'm going to check all my project to replace "v-text" directive inside of components.

[Tofandel]

Okay so after @stepanho found what caused the issue, I tracked it in my project and it's caused by the v-t directive of vue-i18n that does the same as v-text for translations, using $t instead solved the error against a very tiny little bit of performance, so closing the issue

[mjchaudhari]

I had the same problem with vuetify when i used v-text on buttons, below worked for me:

<v-btn v-on:click="toggleState()" small >
    <span v-text="stateToggleLable"/>
</v-btn>