Teleport component's DOM isn't unmounted when deactivated inside KeepAlive

[07akioni]

Version

3.2.31

Reproduction link

codesandbox.io

Steps to reproduce

Click 'show modal' then click 'to tab2'.

What is expected?

Modal's DOM removed.

What is actually happening?

Modal's DOM isn't removed.

[runxc1]

I'm running into the same issue if the app is mounted to a specific element and then later that element is removed from the page. The entire app goes away correctly but the Teleported item that is disabled then displays and is left on the page

[07akioni]

I think this should be tagged as bug.

[ivanmem]

Has anyone found a way to get around this problem?

[edison1105]

@xeleoss
Manually disabled teleport is a workaround.
see

[ivanmem]

The workaround works! I wrote a component that uses it.

FixedTeleport.vue

<script setup lang="ts">
import { useActivated } from "@/composables/useActivated";

const props = defineProps({
  to: String,
  disabled: Boolean,
});

const isActivated = useActivated();
</script>
<template>
  <Teleport :disabled="!isActivated || props.disabled" :to="props.to">
    <slot />
  </Teleport>
</template>

useActivated.ts

import { onActivated, onDeactivated, ref } from "vue";

export function useActivated() {
  const isActive = ref(true);

  onActivated(() => {
    isActive.value = true;
  });

  onDeactivated(() => {
    isActive.value = false;
  });

  return isActive;
}