From 7d39e676c5aca0c08636926ca5e74e75015a1d8e Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Tue, 22 Jun 2021 22:12:25 +0800
Subject: [PATCH] bind this in bubbled events (#6417)

---
 .../render_dom/wrappers/Element/EventHandler.ts  |  2 +-
 src/runtime/internal/lifecycle.ts                |  3 ++-
 .../samples/component-events-this/Inner.svelte   |  7 +++++++
 .../samples/component-events-this/Widget.svelte  |  6 ++++++
 .../samples/component-events-this/_config.js     | 11 +++++++++++
 .../samples/component-events-this/main.svelte    | 16 ++++++++++++++++
 6 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 test/runtime/samples/component-events-this/Inner.svelte
 create mode 100644 test/runtime/samples/component-events-this/Widget.svelte
 create mode 100644 test/runtime/samples/component-events-this/_config.js
 create mode 100644 test/runtime/samples/component-events-this/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
index 2fa2e9291a..ea2eb4da99 100644
--- a/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
+++ b/src/compiler/compile/render_dom/wrappers/Element/EventHandler.ts
@@ -20,7 +20,7 @@ export default class EventHandlerWrapper {
 
 			this.parent.renderer.component.partly_hoisted.push(b`
 				function ${node.handler_name.name}(event) {
-					@bubble($$self, event);
+					@bubble.call(this, $$self, event);
 				}
 			`);
 		}
diff --git a/src/runtime/internal/lifecycle.ts b/src/runtime/internal/lifecycle.ts
index 002bd78d24..a84bcc689b 100644
--- a/src/runtime/internal/lifecycle.ts
+++ b/src/runtime/internal/lifecycle.ts
@@ -65,6 +65,7 @@ export function bubble(component, event) {
 	const callbacks = component.$$.callbacks[event.type];
 
 	if (callbacks) {
-		callbacks.slice().forEach(fn => fn(event));
+		// @ts-ignore
+		callbacks.slice().forEach(fn => fn.call(this, event));
 	}
 }
diff --git a/test/runtime/samples/component-events-this/Inner.svelte b/test/runtime/samples/component-events-this/Inner.svelte
new file mode 100644
index 0000000000..377aa17c43
--- /dev/null
+++ b/test/runtime/samples/component-events-this/Inner.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  const dispatch = createEventDispatcher();
+
+</script>
+
+<button on:click={() => dispatch('bar')} />
\ No newline at end of file
diff --git a/test/runtime/samples/component-events-this/Widget.svelte b/test/runtime/samples/component-events-this/Widget.svelte
new file mode 100644
index 0000000000..30b95e94f1
--- /dev/null
+++ b/test/runtime/samples/component-events-this/Widget.svelte
@@ -0,0 +1,6 @@
+<script>
+  import Inner from './Inner.svelte';
+</script>
+
+<button on:click>click me</button>
+<Inner on:bar />
\ No newline at end of file
diff --git a/test/runtime/samples/component-events-this/_config.js b/test/runtime/samples/component-events-this/_config.js
new file mode 100644
index 0000000000..180ae7367d
--- /dev/null
+++ b/test/runtime/samples/component-events-this/_config.js
@@ -0,0 +1,11 @@
+export default {
+	test({ assert, component, target, window }) {
+		const [button1, button2] = target.querySelectorAll('button');
+
+		button1.dispatchEvent(new window.MouseEvent('click'));
+		button2.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.strictEqual(component.logs[0], button1);
+		assert.ok(component.logs[1] instanceof component.Inner);
+	}
+};
diff --git a/test/runtime/samples/component-events-this/main.svelte b/test/runtime/samples/component-events-this/main.svelte
new file mode 100644
index 0000000000..328a524360
--- /dev/null
+++ b/test/runtime/samples/component-events-this/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Widget from './Widget.svelte';
+	import Inner from './Inner.svelte';
+
+	export let logs = [];
+	export { Inner };
+
+	function foo() {
+		logs.push(this);
+	}
+	function bar() {
+		logs.push(this);
+	}
+</script>
+
+<Widget on:click={foo} on:bar={bar} />
\ No newline at end of file