vuetify: [Bug Report] Ripple directive JS Error

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)

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 3
  • Comments: 19 (9 by maintainers)

Commits related to this issue

Most upvoted comments

Don’t use v-text on components.

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

Because it overwrites any other elements the component renders: image

image

Same problem on a v-btn without v-text, I put :ripple=“false” on my v-btn to patch it.

Don’t use v-text on components.

This should be documented and notifying users not to use v-text