From b928a843c8043f5eb78f63d12e02aa727f11c7d8 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <lhtan93@gmail.com>
Date: Thu, 31 Dec 2020 10:14:16 +0800
Subject: [PATCH] maintain context for keyed each

---
 .../compile/render_dom/wrappers/EachBlock.ts  |  2 +
 .../each-block-keyed-bind-group/_config.js    | 65 +++++++++++++++++++
 .../each-block-keyed-bind-group/main.svelte   | 21 ++++++
 3 files changed, 88 insertions(+)
 create mode 100644 test/runtime/samples/each-block-keyed-bind-group/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-bind-group/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
index ad5c5518d1..2c0f5f68b4 100644
--- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts
@@ -447,6 +447,8 @@ export default class EachBlockWrapper extends Wrapper {
 				: '@destroy_block';
 
 		if (this.dependencies.size) {
+			this.block.maintain_context = true;
+
 			this.updates.push(b`
 				const ${this.vars.each_block_value} = ${snippet};
 				${this.renderer.options.dev && b`@validate_each_argument(${this.vars.each_block_value});`}
diff --git a/test/runtime/samples/each-block-keyed-bind-group/_config.js b/test/runtime/samples/each-block-keyed-bind-group/_config.js
new file mode 100644
index 0000000000..d02730b7f9
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-bind-group/_config.js
@@ -0,0 +1,65 @@
+export default {
+	html: `
+		<label><input type="checkbox" value="Vanilla"> Vanilla</label>	
+		<label><input type="checkbox" value="Strawberry"> Strawberry</label>
+		<label><input type="checkbox" value="Chocolate"> Chocolate</label>
+		<label><input type="checkbox" value="Lemon"> Lemon</label>
+		<label><input type="checkbox" value="Coconout"> Coconout</label>
+	`,
+
+	async test({ assert, target, window }) {
+		const [input1, input2, input3, input4, input5] = target.querySelectorAll('input');
+		const event = new window.Event('change');
+
+		input3.checked = true;
+		await input3.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="Chocolate"> Chocolate</label>
+			<label><input type="checkbox" value="Vanilla"> Vanilla</label>	
+			<label><input type="checkbox" value="Strawberry"> Strawberry</label>
+			<label><input type="checkbox" value="Lemon"> Lemon</label>
+			<label><input type="checkbox" value="Coconout"> Coconout</label>
+		`);
+
+		assert.equal(input1.checked, false);
+		assert.equal(input2.checked, false);
+		assert.equal(input3.checked, true);
+		assert.equal(input4.checked, false);
+		assert.equal(input5.checked, false);
+
+		input4.checked = true;
+		await input4.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="Chocolate"> Chocolate</label>
+			<label><input type="checkbox" value="Lemon"> Lemon</label>
+			<label><input type="checkbox" value="Vanilla"> Vanilla</label>	
+			<label><input type="checkbox" value="Strawberry"> Strawberry</label>
+			<label><input type="checkbox" value="Coconout"> Coconout</label>
+		`);
+
+		assert.equal(input1.checked, false);
+		assert.equal(input2.checked, false);
+		assert.equal(input3.checked, true);
+		assert.equal(input4.checked, true);
+		assert.equal(input5.checked, false);
+
+		input3.checked = false;
+		await input3.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<label><input type="checkbox" value="Lemon"> Lemon</label>
+			<label><input type="checkbox" value="Chocolate"> Chocolate</label>
+			<label><input type="checkbox" value="Vanilla"> Vanilla</label>	
+			<label><input type="checkbox" value="Strawberry"> Strawberry</label>
+			<label><input type="checkbox" value="Coconout"> Coconout</label>
+		`);
+
+		assert.equal(input1.checked, false);
+		assert.equal(input2.checked, false);
+		assert.equal(input3.checked, false);
+		assert.equal(input4.checked, true);
+		assert.equal(input5.checked, false);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-bind-group/main.svelte b/test/runtime/samples/each-block-keyed-bind-group/main.svelte
new file mode 100644
index 0000000000..26e1cfb2f3
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-bind-group/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let flavours = [
+		'Vanilla', 
+		'Strawberry',
+		'Chocolate',
+		'Lemon',
+		'Coconout'
+	];
+	
+	let choices = [];
+	
+	// Put choices first by sorting
+	$: flavours = flavours.sort((a, b) => choices.includes(b) - choices.includes(a));
+</script>
+
+{#each flavours as flavour (flavour)}
+	<label>
+		<input type=checkbox bind:group={choices} value={flavour}>
+		{flavour}
+	</label>
+{/each}