Subscribe on changes!

Teleport target change is lost if happened while teleport is disabled

:lady_beetle: bug scope: teleport
avatar
zhang-xinchao
Mar 6th 2023

Vue version

3.2.47

Link to minimal reproduction

https://sfc.vuejs.org/#eNqdVM1u2zAMfhVWO3gFmnj10XWDDbvsAQrs4ot/FFutLBmSnC4I/O6jJEtJlmRDBySAKJEfP5KfeSDfxnG9myjJSaEbxUYDmppp3JSCDaNUBg6g6BZm2Co5QIKuSSlK0UihDQy6g2f7/jn5QTmX8FMq3t4l98HBVKqjZvEpSS3bfUnun+Iz5dQmYSLgbCuuKYaXokg9H2SChqHDyCtD0QIoWrYDbfacPpdkwBRMrGppjBxyyL6Mv0ri3NBR8uWEZ842DWfNGxT1xsiu4zTmL9J6A0YCFVWN1y/xGmOuxn/vK9Ghoy8PI32hjwFoRxXb7sH01bHI0IymElBTaBxEa70/xehb+W7wbZkOhOV/Ec4CkmeDhPHvXj7M5dg7RwWqrmI4xIhSpHEYBdvYRKgBQwUKrpcTb21PAuZZW7IHqCcDDH8ap844R1ermKve2ESfsUhRJe7kLIQwUsBXVwbK5lx6dydmVM+LLzSowYN6HJ/hAjOoPQlkkgh2SzGe3cdgs3/CZldgbTuiFv202twO9HA4qX6e7UCPzXNhzaSUndTChOkQ5+yLkJglXwTaYhXnLYbcyFharAZj+0fEdYvFwqIVX5gYUQa71SBbyu2Hr+2olkID+HHgdkcwm3hpNOYMK6OumrdOyUlg/Yq2T9BT1vXGLg+/Pc7LP4XJbsDs7fp7v41kGS4bjDwQv1pXQzWuX7UUuHwPjvfyoEuSg7uxd7hyrV2S3phR52mqt41d2a96LVWX4mmtJmHYQNdUD6tayXdNFQKX5OEEI8VLXEsrHGRLFVV/w/zD9QLXws6lmMn8G2RmHZg=

Steps to reproduce

  1. Set the initial the teleport component target (to="#target1")
  2. Disable the teleport component (:disabled="true")
  3. Change the teleport target (to="#target2")
  4. Enable the teleport again

When the teleport is re-enabled, the content is still teleported to the old target (#target1) even though the to property of the teleport component has been updated to "#target2"

What is expected?

Changes to the target of the teleport component (the to property), even if happened while the teleport is disabled, should still be honored when the teleport is re-enabled.

What is actually happening?

Changes to the target of the teleport component (the to property) are ignored if they were made while the teleport is disabled.

System Info

No response

Any additional comments?

Looks like Vue can indeed handle the teleport target change, but Vue only handles it while the teleport is enabled.

1
avatar
edison1105
Mar 6th 2023

Looks like Vue can indeed handle the teleport target change, but Vue only handles it while the teleport is enabled.

Correct, it seems that we also need to handle target changes when teleport is disabled.

avatar
davision
Jun 27th 2023

Just encounter this bug myself.

        <teleport
            :disabled="!appState.leftAside"
            to="#main-action"
        >
            <CreateButton />
        </teleport>

When toggling the boolean leftAside state, the teleported code dissapears.

GitHub Track