From f906180435d581a1553d1566511594a3bdaf0a90 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Thu, 22 Jul 2021 04:25:18 +0800
Subject: [PATCH] fix binding when updating through accessors (#6523)

---
 src/compiler/compile/render_dom/index.ts       |  2 +-
 .../component-binding-accessors/Nested.svelte  |  5 +++++
 .../component-binding-accessors/_config.js     | 18 ++++++++++++++++++
 .../component-binding-accessors/main.svelte    | 12 ++++++++++++
 4 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/component-binding-accessors/Nested.svelte
 create mode 100644 test/runtime/samples/component-binding-accessors/_config.js
 create mode 100644 test/runtime/samples/component-binding-accessors/main.svelte

diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts
index b3ee1e91b1..535983cfd0 100644
--- a/src/compiler/compile/render_dom/index.ts
+++ b/src/compiler/compile/render_dom/index.ts
@@ -148,7 +148,7 @@ export default function dom(
 					kind: 'set',
 					key: { type: 'Identifier', name: prop.export_name },
 					value: x`function(${prop.name}) {
-						this.$set({ ${prop.export_name}: ${prop.name} });
+						this.$$set({ ${prop.export_name}: ${prop.name} });
 						@flush();
 					}`
 				});
diff --git a/test/runtime/samples/component-binding-accessors/Nested.svelte b/test/runtime/samples/component-binding-accessors/Nested.svelte
new file mode 100644
index 0000000000..a3ce2afd9f
--- /dev/null
+++ b/test/runtime/samples/component-binding-accessors/Nested.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value;
+</script>
+
+<input bind:value />
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-accessors/_config.js b/test/runtime/samples/component-binding-accessors/_config.js
new file mode 100644
index 0000000000..0fb83df870
--- /dev/null
+++ b/test/runtime/samples/component-binding-accessors/_config.js
@@ -0,0 +1,18 @@
+export default {
+	async test({ assert, component, target, window }) {
+		const [input1, input2] = target.querySelectorAll('input');
+		assert.equal(input1.value, 'something');
+		assert.equal(input2.value, 'something');
+
+		input1.value = 'abc';
+
+		await input1.dispatchEvent(new window.Event('input'));
+		assert.equal(input1.value, 'abc');
+		assert.equal(input2.value, 'abc');
+
+		await target.querySelector('button').dispatchEvent(new window.MouseEvent('click'));
+
+		assert.equal(input1.value, 'Reset');
+		assert.equal(input2.value, 'Reset');
+	}
+};
diff --git a/test/runtime/samples/component-binding-accessors/main.svelte b/test/runtime/samples/component-binding-accessors/main.svelte
new file mode 100644
index 0000000000..1d8576643d
--- /dev/null
+++ b/test/runtime/samples/component-binding-accessors/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Nested from './Nested.svelte';
+	let value = 'something'
+	let c;
+</script>
+
+<Nested bind:this={c} bind:value />
+<input bind:value />
+
+<button on:click={() => {
+	c.value = 'Reset';
+}}>Reset</button>
\ No newline at end of file