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 @@ + +