fix order of html tags with {#if} in {#key} block (#5685)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+* Fix ordering of elements when using `{#if}` inside `{#key}` ([#5680](https://github.com/sveltejs/svelte/issues/5680))
 * Add `hasContext` lifecycle function ([#5690](https://github.com/sveltejs/svelte/pull/5690))
 * Fix missing `walk` types in `svelte/compiler` ([#5696](https://github.com/sveltejs/svelte/pull/5696))
 

src/compiler/compile/render_dom/wrappers/KeyBlock.ts

@@ -44,7 +44,7 @@ export default class KeyBlockWrapper extends Wrapper {
 			renderer,
 			this.block,
 			node.children,
-			parent,
+			this,
 			strip_whitespace,
 			next_sibling
 		);

test/runtime/samples/key-block-static-if/_config.js

@@ -0,0 +1,21 @@
+export default {
+	html: `
+		<section>
+			<div>Second</div>
+		</section>
+		<button>Click</button>
+	`,
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+
+		await button.dispatchEvent(new window.Event('click'));
+
+		assert.htmlEqual(target.innerHTML, `
+			<section>
+				<div>First</div>
+				<div>Second</div>
+			</section>
+			<button>Click</button>
+		`);
+	}
+};

test/runtime/samples/key-block-static-if/main.svelte

@@ -0,0 +1,17 @@
+<script>
+	let slide = 0;
+	let num = false;
+	
+	const changeNum = () => num = !num;
+</script>
+
+<section>
+	{#key slide}
+		{#if num}
+			<div>First</div>
+		{/if}
+	{/key}
+	<div>Second</div>
+</section>
+
+<button on:click={changeNum}>Click</button>