diff --git a/src/compile/nodes/Component.ts b/src/compile/nodes/Component.ts
index 71c5f8082bfb..e25703dd2e04 100644
--- a/src/compile/nodes/Component.ts
+++ b/src/compile/nodes/Component.ts
@@ -364,7 +364,7 @@ export default class Component extends Node {
${this.handlers.map(handler => deindent`
function ${handler.var}(event) {
- ${handler.snippet}
+ ${handler.snippet || `#component.fire("${handler.name}", event);`}
}
if (${name}) ${name}.on("${handler.name}", ${handler.var});
diff --git a/test/runtime/samples/event-handler-shorthand-dynamic-component/Widget.html b/test/runtime/samples/event-handler-shorthand-dynamic-component/Widget.html
new file mode 100644
index 000000000000..47e1f95a2f93
--- /dev/null
+++ b/test/runtime/samples/event-handler-shorthand-dynamic-component/Widget.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/test/runtime/samples/event-handler-shorthand-dynamic-component/_config.js b/test/runtime/samples/event-handler-shorthand-dynamic-component/_config.js
new file mode 100644
index 000000000000..e0e21f1400df
--- /dev/null
+++ b/test/runtime/samples/event-handler-shorthand-dynamic-component/_config.js
@@ -0,0 +1,18 @@
+export default {
+ html: `
+
+ `,
+
+ test (assert, component, target, window) {
+ const button = target.querySelector('button');
+ const event = new window.MouseEvent('click');
+
+ let answer;
+ component.on('foo', event => {
+ answer = event.answer;
+ });
+
+ button.dispatchEvent(event);
+ assert.equal(answer, 42);
+ }
+};
diff --git a/test/runtime/samples/event-handler-shorthand-dynamic-component/main.html b/test/runtime/samples/event-handler-shorthand-dynamic-component/main.html
new file mode 100644
index 000000000000..388a0876080e
--- /dev/null
+++ b/test/runtime/samples/event-handler-shorthand-dynamic-component/main.html
@@ -0,0 +1,9 @@
+
+
+