From 0c9ed461961cbf195669fe17f7df4e07d7fb02c7 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sun, 4 Aug 2019 09:48:20 -0400
Subject: [PATCH] correctly set mount anchor for HTML tags - fixes #2711

---
 .../compile/render_dom/wrappers/RawMustacheTag.ts  |  6 +++---
 src/runtime/internal/dom.ts                        |  2 +-
 .../samples/each-block-changed-check/expected.js   |  2 +-
 .../samples/each-block-keyed-html-b/_config.js     | 14 ++++++++++++++
 .../samples/each-block-keyed-html-b/main.svelte    | 11 +++++++++++
 5 files changed, 30 insertions(+), 5 deletions(-)
 create mode 100644 test/runtime/samples/each-block-keyed-html-b/_config.js
 create mode 100644 test/runtime/samples/each-block-keyed-html-b/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
index 8b99861a2f..66610c7985 100644
--- a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
+++ b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
@@ -47,10 +47,10 @@ export default class RawMustacheTagWrapper extends Tag {
 				content => `${html_tag}.p(${content});`
 			);
 
-			const anchor = in_head ? 'null' : needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
+			const update_anchor = in_head ? 'null' : needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
 
-			block.builders.hydrate.add_line(`${html_tag} = new @HtmlTag(${init}, ${anchor});`);
-			block.builders.mount.add_line(`${html_tag}.m(${parent_node || '#target'}, anchor);`);
+			block.builders.hydrate.add_line(`${html_tag} = new @HtmlTag(${init}, ${update_anchor});`);
+			block.builders.mount.add_line(`${html_tag}.m(${parent_node || '#target'}${parent_node ? '' : ', anchor'});`);
 
 			if (needs_anchor) {
 				block.add_element(html_anchor, '@empty()', '@empty()', parent_node);
diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index b5123ba48d..6faf3d9c60 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -252,7 +252,7 @@ export class HtmlTag {
 		this.u(html);
 	}
 
-	m(target: HTMLElement, anchor: HTMLElement) {
+	m(target: HTMLElement, anchor: HTMLElement = null) {
 		for (let i = 0; i < this.n.length; i += 1) {
 			insert(target, this.n[i], anchor);
 		}
diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js
index 6c72bcfae6..f6c9d52dc4 100644
--- a/test/js/samples/each-block-changed-check/expected.js
+++ b/test/js/samples/each-block-changed-check/expected.js
@@ -55,7 +55,7 @@ function create_each_block(ctx) {
 			append(span, t4);
 			append(span, t5);
 			append(div, t6);
-			html_tag.m(div, anchor);
+			html_tag.m(div);
 		},
 
 		p(changed, ctx) {
diff --git a/test/runtime/samples/each-block-keyed-html-b/_config.js b/test/runtime/samples/each-block-keyed-html-b/_config.js
new file mode 100644
index 0000000000..6343a31769
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-html-b/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: `
+		<div><span>hello</span> John</div>
+		<div><span>hello</span> Jill</div>
+	`,
+
+	test({ assert, component, target }) {
+		component.names = component.names.reverse();
+		assert.htmlEqual(target.innerHTML, `
+			<div><span>hello</span> Jill</div>
+			<div><span>hello</span> John</div>
+		`);
+	}
+};
diff --git a/test/runtime/samples/each-block-keyed-html-b/main.svelte b/test/runtime/samples/each-block-keyed-html-b/main.svelte
new file mode 100644
index 0000000000..02955577fc
--- /dev/null
+++ b/test/runtime/samples/each-block-keyed-html-b/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let names = ['John', 'Jill'];
+</script>
+
+{#each names as name (name)}
+	<div>
+		<span>hello</span>
+		{@html name}
+	</div>
+{/each}
+