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

Order of html tags changes when using key > if #5680

Closed
MarkTanashchuk opened this issue Nov 15, 2020 · 2 comments · Fixed by #5685
Closed

Order of html tags changes when using key > if #5680

MarkTanashchuk opened this issue Nov 15, 2020 · 2 comments · Fixed by #5685
Labels

Comments

@MarkTanashchuk
Copy link

I need to display html when variable (in this repl - num) is truthy

And I also need to animate first tag after each change of another variable(slide)

If I have html structure like this:

{#key animateOnChangeVariable}
  {#if variableIsTrythy}
    <div class="first">First tag</div>
  {/if}
{/key}
<div class="second">Second tag</div>

And if num is changed, first tag is inserted after second (html order is changed)

REPL
https://svelte.dev/repl/3ba09b8c428c4ee58c77ff477b5fa632?version=3.29.7

If {#if} and {#key} swapped, everything works correctly

Also, if you have several buttons at the same time, which change num by clicking - an error is thrown (uncomment second button, uncomment function and get error div1 is not defined).

@MarkTanashchuk
Copy link
Author

MarkTanashchuk commented Nov 15, 2020

I hope I described bug clearly

@MarkTanashchuk MarkTanashchuk changed the title Sequence of html tags changes when using key > if Order of html tags changes when using key > if Nov 15, 2020
@Conduitry Conduitry added the bug label Nov 15, 2020
@Conduitry
Copy link
Member

This is fixed in 3.30.0 - https://svelte.dev/repl/3ba09b8c428c4ee58c77ff477b5fa632?version=3.30.0

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

Successfully merging a pull request may close this issue.

2 participants