Subscribe on changes!

Teleported multi-root child component elements are not being removed together with parent component

avatar
Feb 3rd 2021

Version

3.0.5

Reproduction link

https://github.com/Connum/vue-teleport-multiroot-bug

Steps to reproduce

  1. Have a component <teleport> a child component with multiple root elements to somewhere in the body
  2. Trigger deletion of the parent component

What is expected?

All traces of the teleported child element are removed

What is actually happening?

The child component's elements remain in the body


Might be related to #1088

I tried looking into this myself, and it seems like there's an issue with the comment nodes - they are removed, but the actual element is not: image and after deletion: image

I was able to seemingly fix this for my use case by extending runtime-core/src/renderer.ts like this:

if (type === Static || type === Comment) {
      removeStaticNode(vnode)
      return
}

But I also had to check for child not being null in the remove() functions in both NodeOpts.ts files (runtime-tests and runtime-dom), but now 8 tests are failing and I'm a bit stuck because obviously I don't know what I'm doing... 😉