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
- fix(vuetify): remove v-text directive with interpolated text cf vuetify issue: https://github.com/vuetifyjs/vuetify/issues/11792 — committed to EPFL-ENAC/unhcr-geneva-tech-hub-app by guilbep 2 years ago
- fix(vuetify): remove v-text directive with interpolated text cf vuetify issue: https://github.com/vuetifyjs/vuetify/issues/11792 — committed to EPFL-ENAC/unhcr-geneva-tech-hub-app by guilbep 2 years ago
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-tdirective of vue-i18n that does the same asv-textfor translations, using$tinstead solved the error against a very tiny little bit of performance, so closing the issueBecause it overwrites any other elements the component renders:
Same problem on a v-btn without v-text, I put :ripple=“false” on my v-btn to patch it.
This should be documented and notifying users not to use
v-text