Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

{#key} doesn't destroy old components when a transition started #6152

Closed
bfanger opened this issue Mar 30, 2021 · 11 comments
Closed

{#key} doesn't destroy old components when a transition started #6152

bfanger opened this issue Mar 30, 2021 · 11 comments

Comments

@bfanger
Copy link
Contributor

bfanger commented Mar 30, 2021

Describe the bug

A {#key} block should destroy the component of the previous key.
This works most of the time, but when an intro is started the components is not destroyed or removed from the dom.

To reproduce:

Minimal example to reproduce the bug:

<!-- App.svelte -->
<script>
  import Child from './Child.svelte'
  let index = 0
</script>
{#key index}
  <Child on:click={() => {index++}} />
{/key}

<!-- Child.svelte -->
<script>
  import { fade } from 'svelte/transition'
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()	
  let visible = false
</script>
<button on:click={() => { visible = true; dispatch('click') }}>Next</button>
{#if visible} <div transition:fade /> {/if}

A REPL to see the bug in action, just press the "Next" button.

Expected behavior
Intro animations should be canceled, outros should start and when the outros are completed the component should be destroyed.

Information about your Svelte project:
System: OS: macOS 11.2.3
Browsers:
Chrome: 89.0.4389.90
Firefox: 87.0
Safari: 14.0.3
Svelte: 3.36.0

Severity
This is breaking pages, showing weird duplicate components.

@Kapsonfire-DE
Copy link
Contributor

Duplicate of #6150

@stale
Copy link

stale bot commented Jun 28, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale-bot label Jun 28, 2021
@bfanger
Copy link
Contributor Author

bfanger commented Jun 29, 2021

Bug still prevalent in the current version: https://svelte.dev/repl/617dd85dcc0649b09a90dd5a1832a981?version=3.38.3

@stale stale bot removed the stale-bot label Jun 29, 2021
@stale
Copy link

stale bot commented Dec 26, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale-bot label Dec 26, 2021
@bfanger
Copy link
Contributor Author

bfanger commented Dec 27, 2021

@stale stale bot removed the stale-bot label Dec 27, 2021
@JoshuaNitschke
Copy link

Came here to report the same...

@kiosion
Copy link

kiosion commented Dec 16, 2022

Still experiencing this, it's especially bad when the initial element is overflowing

@multiplehats
Copy link

Also ran into this

@goldentoaste
Copy link

me too!

@grabbels
Copy link

Same here!

@Conduitry
Copy link
Member

This should be fixed in 3.57.0 - https://svelte.dev/repl/617dd85dcc0649b09a90dd5a1832a981?version=3.57.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants