Subscribe on changes!

[Challenging Bug] Teleport cumulates its content when used with Suspense

avatar
Jul 24th 2021

Version

vue 3.1.4

Reproduction link

https://github.com/dmx374/teleportbug

Steps to reproduce

If you have 2 layouts (LayoutA.vue, LayoutB.vue, see the reproduction repo) and one is using Suspense, then teleport cumulates its content instead of cleaning.

When you go back and forth between Index and About pages, multiple times (go to About, then Index, then About again and so on), the #modal target get cumulated.

To fix the bug:

  • open LayoutA.vue
  • remove the Suspense tag, replace with slot (like in LayoutB.vue)

What is expected?

Teleport should not cumulate its content. Remove Suspense in LayoutA (put slot instead) to see the expected normal behavior.

What is actually happening?

Teleport is cumulating things when using with Suspense

avatar
Jul 24th 2021

mini repro see playground

cause is :

function normalizeSuspenseSlot(s: any) {
  //...
  s = normalizeVNode(s)
  if (block) {
+	after filter, dynamicChildren is an empty array.maybe should avoid set an empty array to dynamicChildren 
    s.dynamicChildren = block.filter(c => c !== s)
  }
  return s
}