From 24c44b9177b74e4010c4349242dec4ac9b712a71 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 24 Nov 2020 00:41:56 +0800
Subject: [PATCH] fix order of html tags with {#if} in {#key} block (#5685)

---
 CHANGELOG.md                                  |  1 +
 .../compile/render_dom/wrappers/KeyBlock.ts   |  2 +-
 .../samples/key-block-static-if/_config.js    | 21 +++++++++++++++++++
 .../samples/key-block-static-if/main.svelte   | 17 +++++++++++++++
 4 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/key-block-static-if/_config.js
 create mode 100644 test/runtime/samples/key-block-static-if/main.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index adbdf5a95f..29857123dc 100644
--- a/CHANGELOG.md
+++ b/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))
 
diff --git a/src/compiler/compile/render_dom/wrappers/KeyBlock.ts b/src/compiler/compile/render_dom/wrappers/KeyBlock.ts
index 9688337d7c..cbd021ff6c 100644
--- a/src/compiler/compile/render_dom/wrappers/KeyBlock.ts
+++ b/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
 		);
diff --git a/test/runtime/samples/key-block-static-if/_config.js b/test/runtime/samples/key-block-static-if/_config.js
new file mode 100644
index 0000000000..2926ad7c24
--- /dev/null
+++ b/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>
+		`);
+	}
+};
diff --git a/test/runtime/samples/key-block-static-if/main.svelte b/test/runtime/samples/key-block-static-if/main.svelte
new file mode 100644
index 0000000000..cbacb77674
--- /dev/null
+++ b/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>
\ No newline at end of file