Skip to content

[Vapor mode] Modal with Transitions rendering issue #14192

@justinbeaty

Description

@justinbeaty

Vue version

3.6.0-alpha.6

Link to minimal reproduction

https://play.vuejs.org/#eNqVVgtv2zYQ/is3dUOSIpKduisSLQ22BgX2wNZiCQYMEDDQ0sliQ5ECSfnRwP99R1KSZcfJMMAGpLvvnvzuqMfop6ZJli1GaXT9TRxn8ndVMAG5qhslUVpYcVtB3hqrav6VzQWCEcoaYLKA27s7sJpJwy1X0iSZjOObTGby2uSaNxYM2rYhCSdv2kLwXWpVw0ky8W8u9skAeASNJWw7SFBlMiff5KtSq+DgvUOdlkwYPKNYkxAsBLZYN4JZpDeA63lrrZLAi/dZ5Ozj2jnIIvgxFzx/6KS9V6tbzKKbOxKFVK8nwYF3Te7uUaDP0yoynatiQ3CnIR01D1qDYCsEH2XXw3NomDHApVc2WjXg++TtAjZ1eYzTCTkqgwc5+qqHqGTfFwyvKmQF6kFDump2c+tPDn72uusJSQbLyV6vnMDnEjo36Wul1xEyOo+sofMo+SL5YpQk2jw6fBa5arlA/anxXMiiFLzG6ZgQavWrl7ken/fyvML84Yj8i1k7WRZ91mhQL6ngQWeZXqAN6o93f+CangclFdAKQr+g/BONEq3LMcA+tLKgtEc4n+0vnpBcLu7Nx7VFonhXlCcJIbcen0VE0tsXSt+lO0veertMbqmLA/nd4B1MS+C744mhEy+w5BI/u7dT79bRIYUPSglkxMvtszMAS0ZFhPO8H8YUJKsdq7pR6A+/4EtYxrzs+Eb8ywWxtgfGNTMPY945/D6C0raMUqVejkn4FBiIuocinFsrfW4DgopnrbAQBFQmgcbOJ+S9m85nw+3NaYeiafUBhwAO1LkfZvNIYp2vI1b/M6lSKftyD44iwNHBh+7Ue7pu3+0L4SBy5yDusNEheliN32LN7emJ30InZ4fAm0+/jdbjKIfn2vH0bfdM62bg5/7CCbeJ3Qj3mOyoGCasUcEmhZKvsfjByb7GXBa4TuHq6urSS6xqUpj6R4Gl7Z9XvLBVChfT6Xf+vUK+qEg7COYsf1hoRQuCuC2UTkEv5ux0eg7dL/n+zAMLbijbDWUhcB1CDuWkoBqWc7sh+MwAMoOEoC0wlDPMTaipS2s2nTbBV00rhJMf1lrlBQ0rCtpMKbwhCAE73NN0X5VlGVRK0/jEmhW8NWTXW6h1bCpWuH0ydVK4pP9hkbNZqHJcE+3IZ+sJswrVLNQT0o9Hh9Bn9/bN/OpydmDtRmps2FXpLMewfRYHg1IoRuen3TH28Mlr0ryGe7p4S+UWOzUOPJ/oE0ajb2rMmkZwLIgoQLdeTVe28d893nRX9m5pwqpCf5tzDUtu+JwLd8LckIvFQmDhLecb+KtFuifpwwhCHn+rFnImXdu42IBjTfjC2n027OI5B1jQo1yETCq6DbvkvcvJqCGUNJ2w/3DyzehYF3o+7hzdGkuk4/gP2MjfIU/p5jv0dZzK8QrnD9zGvqRS6ToFkzOBpxfJxYhTRzSUCS0SP/Z0Wf6zRO0uYLorZ8m7ZBoz0VQseRdt/wUCr4JE

Steps to reproduce

The reproduction link is the example from https://vuejs.org/examples/#modal but with <template vapor> on Modal.vue

  1. Open the dialog, and 'Custom header' is not rendered
  2. Change the body slot to the default slot in Modal.vue:
---          <slot name="body">default body</slot>
+++          <slot>default body</slot>
  1. Open the dialog, and 'Custom header' is rendered, but duplicate elements are rendered (modal-mask, modal-container, etc)
  2. Upon closing, an error "el.addEventListener is not a function" happens

What is expected?

The example would work the same as, or similar to, a non-vapor component.

What is actually happening?

Described in steps to reproduce.

System Info

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: vaporrelated to vapor mode

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions