fix wrong order of generate modifier code (#5147)

* fix wrong order of generate modifier code

* add unit test of #5146

* Update events.js

Author: Kingwl

src/compiler/codegen/events.js

@@ -63,10 +63,11 @@ function genHandler (
       : `function($event){${handler.value}}` // inline statement
   } else {
     let code = ''
+    let genModifierCode = ''
     const keys = []
     for (const key in handler.modifiers) {
       if (modifierCode[key]) {
-        code += modifierCode[key]
+        genModifierCode += modifierCode[key]
         // left/right
         if (keyCodes[key]) {
           keys.push(key)
@@ -78,6 +79,10 @@ function genHandler (
     if (keys.length) {
       code += genKeyFilter(keys)
     }
+    // Make sure modifiers like prevent and stop get executed after key filtering
+    if (genModifierCode) {
+      code += genModifierCode
+    }
     const handlerCode = isMethodPath
       ? handler.value + '($event)'
       : isFunctionExpression

test/unit/features/directives/on.spec.js

@@ -527,4 +527,25 @@ describe('Directive v-on', () => {
     expect(spyUp.calls.count()).toBe(1)
     expect(spyDown.calls.count()).toBe(1)
   })
+
+  // Github Issues #5146
+  it('should only prevent when match keycode', () => {
+    let prevented = false
+    vm = new Vue({
+      el,
+      template: `
+        <input ref="input" @keydown.enter.prevent="foo">
+      `,
+      methods: {
+        foo ($event) {
+          prevented = $event.defaultPrevented
+        }
+      }
+    })
+
+    triggerEvent(vm.$refs.input, 'keydown', e => { e.keyCode = 32 })
+    expect(prevented).toBe(false)
+    triggerEvent(vm.$refs.input, 'keydown', e => { e.keyCode = 13 })
+    expect(prevented).toBe(true)
+  })
 })

test/unit/modules/compiler/codegen.spec.js

@@ -268,6 +268,19 @@ describe('codegen', () => {
     )
   })
 
+  // Github Issues #5146
+  it('generate events with generic modifiers and keycode correct order', () => {
+    assertCodegen(
+      '<input @keydown.enter.prevent="onInput">',
+      `with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13))return null;$event.preventDefault();onInput($event)}}})}`
+    )
+
+    assertCodegen(
+      '<input @keydown.enter.stop="onInput">',
+      `with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13))return null;$event.stopPropagation();onInput($event)}}})}`
+    )
+  })
+
   it('generate events with mouse event modifiers', () => {
     assertCodegen(
       '<input @click.ctrl="onClick">',