From 7fa676e55f97fb8926c63e32bdf30cd75be455db Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 8 Nov 2019 17:50:59 -0500
Subject: [PATCH] feat(v-on): adjust key modifier behavior to match 2.x

---
 .../runtime-dom/__tests__/directives/vOn.spec.ts | 16 ++++++++++++++--
 packages/runtime-dom/src/directives/vOn.ts       | 12 +++++++-----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/runtime-dom/__tests__/directives/vOn.spec.ts b/packages/runtime-dom/__tests__/directives/vOn.spec.ts
index fda9d6c0..a9d32713 100644
--- a/packages/runtime-dom/__tests__/directives/vOn.spec.ts
+++ b/packages/runtime-dom/__tests__/directives/vOn.spec.ts
@@ -44,20 +44,32 @@ describe('runtime-dom: v-on directive', () => {
     const el = document.createElement('div')
     const fn = jest.fn()
     // <div @keyup.ctrl.esc="test"/>
-    const nextValue = withKeys(withModifiers(fn, ['ctrl']), ['esc'])
+    const nextValue = withKeys(withModifiers(fn, ['ctrl']), [
+      'esc',
+      'arrow-left'
+    ])
     patchEvent(el, 'keyup', null, nextValue, null)
+
     triggerEvent(el, 'keyup', e => (e.key = 'a'))
     expect(fn).not.toBeCalled()
+
     triggerEvent(el, 'keyup', e => {
       e.ctrlKey = false
       e.key = 'esc'
     })
     expect(fn).not.toBeCalled()
+
     triggerEvent(el, 'keyup', e => {
       e.ctrlKey = true
       e.key = 'Escape'
     })
-    expect(fn).toBeCalled()
+    expect(fn).toBeCalledTimes(1)
+
+    triggerEvent(el, 'keyup', e => {
+      e.ctrlKey = true
+      e.key = 'ArrowLeft'
+    })
+    expect(fn).toBeCalledTimes(2)
   })
 
   test('it should support "exact" modifier', () => {
diff --git a/packages/runtime-dom/src/directives/vOn.ts b/packages/runtime-dom/src/directives/vOn.ts
index b8b91d48..f2f11622 100644
--- a/packages/runtime-dom/src/directives/vOn.ts
+++ b/packages/runtime-dom/src/directives/vOn.ts
@@ -1,3 +1,5 @@
+import { hyphenate } from '@vue/shared'
+
 const systemModifiers = ['ctrl', 'shift', 'alt', 'meta']
 
 type KeyedEvent = KeyboardEvent | MouseEvent | TouchEvent
@@ -35,17 +37,17 @@ export const withModifiers = (fn: Function, modifiers: string[]) => {
 const keyNames: Record<string, string | string[]> = {
   esc: 'escape',
   space: ' ',
-  up: 'arrowup',
-  left: 'arrowleft',
-  right: 'arrowright',
-  down: 'arrowdown',
+  up: 'arrow-up',
+  left: 'arrow-left',
+  right: 'arrow-right',
+  down: 'arrow-down',
   delete: 'backspace'
 }
 
 export const withKeys = (fn: Function, modifiers: string[]) => {
   return (event: KeyboardEvent) => {
     if (!('key' in event)) return
-    const eventKey = event.key.toLowerCase()
+    const eventKey = hyphenate(event.key)
     if (
       // None of the provided key modifiers match the current event key
       !modifiers.some(k => k === eventKey || keyNames[k] === eventKey)