diff --git a/src/generate/visitors/attributes/addElementAttributes.js b/src/generate/visitors/attributes/addElementAttributes.js
index c4c2d7e8de..4873d2d637 100644
--- a/src/generate/visitors/attributes/addElementAttributes.js
+++ b/src/generate/visitors/attributes/addElementAttributes.js
@@ -117,8 +117,8 @@ export default function addElementAttributes ( generator, node, local ) {
generator.addSourcemapLocations( attribute.expression );
const flattened = flattenReference( attribute.expression.callee );
- if ( flattened.name !== 'event' ) {
- // allow event.stopPropagation() etc
+ if ( flattened.name !== 'event' && flattened.name !== 'this' ) {
+ // allow event.stopPropagation(), this.select() etc
generator.code.prependRight( attribute.expression.start, 'component.' );
}
diff --git a/src/utils/flattenReference.js b/src/utils/flattenReference.js
index 2000c8941a..c975c65095 100644
--- a/src/utils/flattenReference.js
+++ b/src/utils/flattenReference.js
@@ -7,10 +7,10 @@ export default function flatten ( node ) {
node = node.object;
}
- if ( node.type !== 'Identifier' ) return null;
+ const name = node.type === 'Identifier' ? node.name : node.type === 'ThisExpression' ? 'this' : null;
- const name = node.name;
- parts.unshift( name );
+ if ( !name ) return null;
+ parts.unshift( name );
return { name, keypath: parts.join( '.' ) };
}
diff --git a/test/generator/event-handler-event-methods/_config.js b/test/generator/event-handler-event-methods/_config.js
index 2b8ddd4f50..8b701e9825 100644
--- a/test/generator/event-handler-event-methods/_config.js
+++ b/test/generator/event-handler-event-methods/_config.js
@@ -1,7 +1,4 @@
export default {
- solo: true,
- show: true,
-
test ( assert, component, target, window ) {
const allow = target.querySelector( '.allow-propagation' );
const stop = target.querySelector( '.stop-propagation' );
diff --git a/test/generator/event-handler-this-methods/_config.js b/test/generator/event-handler-this-methods/_config.js
new file mode 100644
index 0000000000..170ce46b0f
--- /dev/null
+++ b/test/generator/event-handler-this-methods/_config.js
@@ -0,0 +1,16 @@
+export default {
+ test ( assert, component, target, window ) {
+ // Click events don't focus elements in JSDOM – obviously they would
+ // in real browsers. More realistically, you'd use this for e.g.
+ // this.select(), but that's harder to test than this.focus()
+
+ const wont = target.querySelector( '.wont-focus' );
+ const will = target.querySelector( '.will-focus' );
+
+ wont.dispatchEvent( new window.MouseEvent( 'click' ) );
+ assert.equal( window.document.activeElement, window.document.body );
+
+ will.dispatchEvent( new window.MouseEvent( 'click' ) );
+ assert.equal( window.document.activeElement, will );
+ }
+};
diff --git a/test/generator/event-handler-this-methods/main.html b/test/generator/event-handler-this-methods/main.html
new file mode 100644
index 0000000000..a9f8282c9e
--- /dev/null
+++ b/test/generator/event-handler-this-methods/main.html
@@ -0,0 +1,2 @@
+
+