Skip to content

Teleport rendered before async dependencies resolve in Suspense component #8603

Open
@ploca14

Description

@ploca14

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9UMtqwzAQ/JVFlzgQIpNjKwdCf6BQH31xrQ0R6IUl25jSf+/Kju0ESm6aYWc0Mz/s4v2x75C9MRGaVvkIAWPnz5VVxrs2wiWMtvlwxsO1dQZ2R74ySbh7r6zgs5REBCIar+uIhADEVxc82jAjwlL19yeBzZtvZLoobyrAoLQGZ/UILVqJLb0bhHjDLZOzaCPQbYvB6R6l4E8flKhxahFdUbFvJ8eKzeaTJrmiBGUMSkWR9Sj4IlkCr4aCP3QRfK3JDuxpkX+mbJwNESTqeoQCMhP2UJzB4gCftKkKmGVUYCJJUiqDrouJOgDd7mniytZDre4e2SnP88S+Gj7FnnLBNtSyEtTXSHue6DeKJsNS8qFVZdnvH5ezukg=

Steps to reproduce

See reproduction link.

<Suspense>
  <div>
    <AsyncComp />
    <div>This will only render once the AsyncComp is resolved</div>
    <Teleport to="body">This is rendered immediately</Teleport>
  </div>
</Suspense>

What is expected?

The Teleport is only rendered once the async dependencies of the Suspense resolve.

What is actually happening?

The Teleport is rendered immediately, before the async dependencies of the Suspense resolve.

System Info

No response

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions