From 862070662dd4871cb834664435ec836df57c7d57 Mon Sep 17 00:00:00 2001 From: Des Preston Date: Mon, 21 Sep 2020 10:16:45 -0400 Subject: [PATCH] fix(compiler): event handlers with modifiers swallowing arguments (fix #10867) (#10958) Pass full parent argument list to the event handler when there are event modifiers present. --- src/compiler/codegen/events.js | 4 +- test/unit/modules/compiler/codegen.spec.js | 50 +++++++++++----------- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/compiler/codegen/events.js b/src/compiler/codegen/events.js index fc817c03d52..4b0776115a0 100644 --- a/src/compiler/codegen/events.js +++ b/src/compiler/codegen/events.js @@ -148,9 +148,9 @@ function genHandler (handler: ASTElementHandler | Array): str code += genModifierCode } const handlerCode = isMethodPath - ? `return ${handler.value}($event)` + ? `return ${handler.value}.apply(null, arguments)` : isFunctionExpression - ? `return (${handler.value})($event)` + ? `return (${handler.value}).apply(null, arguments)` : isFunctionInvocation ? `return ${handler.value}` : handler.value diff --git a/test/unit/modules/compiler/codegen.spec.js b/test/unit/modules/compiler/codegen.spec.js index 10c65618a58..d7faa204944 100644 --- a/test/unit/modules/compiler/codegen.spec.js +++ b/test/unit/modules/compiler/codegen.spec.js @@ -368,52 +368,52 @@ describe('codegen', () => { it('generate events with keycode', () => { assertCodegen( '', - `with(this){return _c('input',{on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return onInput($event)}}})}` + `with(this){return _c('input',{on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return onInput.apply(null, arguments)}}})}` ) // multiple keycodes (delete) assertCodegen( '', - `with(this){return _c('input',{on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"]))return null;return onInput($event)}}})}` + `with(this){return _c('input',{on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"]))return null;return onInput.apply(null, arguments)}}})}` ) // multiple keycodes (esc) assertCodegen( '', - `with(this){return _c('input',{on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"esc",27,$event.key,["Esc","Escape"]))return null;return onInput($event)}}})}` + `with(this){return _c('input',{on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"esc",27,$event.key,["Esc","Escape"]))return null;return onInput.apply(null, arguments)}}})}` ) // multiple keycodes (space) assertCodegen( '', - `with(this){return _c('input',{on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"space",32,$event.key,[" ","Spacebar"]))return null;return onInput($event)}}})}` + `with(this){return _c('input',{on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"space",32,$event.key,[" ","Spacebar"]))return null;return onInput.apply(null, arguments)}}})}` ) // multiple keycodes (chained) assertCodegen( '', - `with(this){return _c('input',{on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter")&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"]))return null;return onInput($event)}}})}` + `with(this){return _c('input',{on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter")&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"]))return null;return onInput.apply(null, arguments)}}})}` ) // number keycode assertCodegen( '', - `with(this){return _c('input',{on:{"input":function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==13)return null;return onInput($event)}}})}` + `with(this){return _c('input',{on:{"input":function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==13)return null;return onInput.apply(null, arguments)}}})}` ) // custom keycode assertCodegen( '', - `with(this){return _c('input',{on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"custom",undefined,$event.key,undefined))return null;return onInput($event)}}})}` + `with(this){return _c('input',{on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"custom",undefined,$event.key,undefined))return null;return onInput.apply(null, arguments)}}})}` ) }) it('generate events with generic modifiers', () => { assertCodegen( '', - `with(this){return _c('input',{on:{"input":function($event){$event.stopPropagation();return onInput($event)}}})}` + `with(this){return _c('input',{on:{"input":function($event){$event.stopPropagation();return onInput.apply(null, arguments)}}})}` ) assertCodegen( '', - `with(this){return _c('input',{on:{"input":function($event){$event.preventDefault();return onInput($event)}}})}` + `with(this){return _c('input',{on:{"input":function($event){$event.preventDefault();return onInput.apply(null, arguments)}}})}` ) assertCodegen( '', - `with(this){return _c('input',{on:{"input":function($event){if($event.target !== $event.currentTarget)return null;return onInput($event)}}})}` + `with(this){return _c('input',{on:{"input":function($event){if($event.target !== $event.currentTarget)return null;return onInput.apply(null, arguments)}}})}` ) }) @@ -421,74 +421,74 @@ describe('codegen', () => { it('generate events with generic modifiers and keycode correct order', () => { assertCodegen( '', - `with(this){return _c('input',{on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.preventDefault();return onInput($event)}}})}` + `with(this){return _c('input',{on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.preventDefault();return onInput.apply(null, arguments)}}})}` ) assertCodegen( '', - `with(this){return _c('input',{on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.stopPropagation();return onInput($event)}}})}` + `with(this){return _c('input',{on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.stopPropagation();return onInput.apply(null, arguments)}}})}` ) }) it('generate events with mouse event modifiers', () => { assertCodegen( '', - `with(this){return _c('input',{on:{"click":function($event){if(!$event.ctrlKey)return null;return onClick($event)}}})}` + `with(this){return _c('input',{on:{"click":function($event){if(!$event.ctrlKey)return null;return onClick.apply(null, arguments)}}})}` ) assertCodegen( '', - `with(this){return _c('input',{on:{"click":function($event){if(!$event.shiftKey)return null;return onClick($event)}}})}` + `with(this){return _c('input',{on:{"click":function($event){if(!$event.shiftKey)return null;return onClick.apply(null, arguments)}}})}` ) assertCodegen( '', - `with(this){return _c('input',{on:{"click":function($event){if(!$event.altKey)return null;return onClick($event)}}})}` + `with(this){return _c('input',{on:{"click":function($event){if(!$event.altKey)return null;return onClick.apply(null, arguments)}}})}` ) assertCodegen( '', - `with(this){return _c('input',{on:{"click":function($event){if(!$event.metaKey)return null;return onClick($event)}}})}` + `with(this){return _c('input',{on:{"click":function($event){if(!$event.metaKey)return null;return onClick.apply(null, arguments)}}})}` ) assertCodegen( '', - `with(this){return _c('input',{on:{"click":function($event){if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey)return null;return onClick($event)}}})}` + `with(this){return _c('input',{on:{"click":function($event){if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey)return null;return onClick.apply(null, arguments)}}})}` ) assertCodegen( '', - `with(this){return _c('input',{on:{"click":function($event){if(!$event.ctrlKey)return null;if($event.shiftKey||$event.altKey||$event.metaKey)return null;return onClick($event)}}})}` + `with(this){return _c('input',{on:{"click":function($event){if(!$event.ctrlKey)return null;if($event.shiftKey||$event.altKey||$event.metaKey)return null;return onClick.apply(null, arguments)}}})}` ) }) it('generate events with multiple modifiers', () => { assertCodegen( '', - `with(this){return _c('input',{on:{"input":function($event){$event.stopPropagation();$event.preventDefault();if($event.target !== $event.currentTarget)return null;return onInput($event)}}})}` + `with(this){return _c('input',{on:{"input":function($event){$event.stopPropagation();$event.preventDefault();if($event.target !== $event.currentTarget)return null;return onInput.apply(null, arguments)}}})}` ) }) it('generate events with capture modifier', () => { assertCodegen( '', - `with(this){return _c('input',{on:{"!input":function($event){return onInput($event)}}})}` + `with(this){return _c('input',{on:{"!input":function($event){return onInput.apply(null, arguments)}}})}` ) }) it('generate events with once modifier', () => { assertCodegen( '', - `with(this){return _c('input',{on:{"~input":function($event){return onInput($event)}}})}` + `with(this){return _c('input',{on:{"~input":function($event){return onInput.apply(null, arguments)}}})}` ) }) it('generate events with capture and once modifier', () => { assertCodegen( '', - `with(this){return _c('input',{on:{"~!input":function($event){return onInput($event)}}})}` + `with(this){return _c('input',{on:{"~!input":function($event){return onInput.apply(null, arguments)}}})}` ) }) it('generate events with once and capture modifier', () => { assertCodegen( '', - `with(this){return _c('input',{on:{"~!input":function($event){return onInput($event)}}})}` + `with(this){return _c('input',{on:{"~!input":function($event){return onInput.apply(null, arguments)}}})}` ) }) @@ -538,7 +538,7 @@ describe('codegen', () => { // with modifiers assertCodegen( ``, - `with(this){return _c('input',{on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return (e=>current++)($event)}}})}` + `with(this){return _c('input',{on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return (e=>current++).apply(null, arguments)}}})}` ) }) @@ -563,7 +563,7 @@ describe('codegen', () => { it('generate multiple event handlers', () => { assertCodegen( '', - `with(this){return _c('input',{on:{"input":[function($event){current++},function($event){$event.stopPropagation();return onInput($event)}]}})}` + `with(this){return _c('input',{on:{"input":[function($event){current++},function($event){$event.stopPropagation();return onInput.apply(null, arguments)}]}})}` ) })