<svelte:component> not properly destroyed when inside of an Element with transition:fn

[icalvin102]

Describe the bug

If a <svelte:component> tag is used inside of a element with a svelte transition (like in the code below) and the this prop is changed while the transition is playing then the old component will stay mounted alongside the new one.

{#if open}
  <div transition:fade>
    {#if component}
      <svelte:component this={component} />
    {/if}
  </div>
{/if}

Edit: This behavior also seems to occur if a there is a transition inside the component that is provided to the this prop.

Reproduction

https://svelte.dev/repl/c3000501dc154b88b93cf37c58b350b7?version=3.43.0

To reproduce click the Open button followed by clicking the Confirm buttons.

Only one component should be visible at a time but all components stay mounted.

Remove transition:fade in Container.svelte to get the proper behavior.

Logs

No response

System Info

Linux 5.13.13-arch1-1, Brave Version 1.26.74 Chromium: 91.0.4472.124 (Official Build) (64-bit)

Severity

annoyance

[rmunn]

My discoveries:

• Clicking on the Confirm button three times causes all three of the added components to eventually be removed.
• Clicking on Open once, then Confirm once, then clicking on Open again, causes the "Bar" component to be replaced by Foo, so that there are two Foo components open. And then you have to click Confirm three more times, four in total, and then all four components (two Foos, a Bar, and another Foo) are removed.
• If you add a console.log call to the cleanup() function and then click Confirm three times, you'll see that cleanup() is called three times, at the time you'd expect. If you add an onDestroy call to the Foo and Bar components and log "Destroying Foo" and "Destroying Bar" respectively, then you'll see that "Destroying Foo" is printed only once, and "Destroying Bar" is never printed, even when all three components are removed from the page.
• Removing transition:fade does indeed fix the issue; you see the cleanup() function log to the console followed by "Destroying Foo", then another cleanup() function logged to the console followed by "Destroying Bar", then finally one more cleanup() function followed by "Destroying Foo".