feat(v-on): adjust key modifier behavior to match 2.x

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', () => {

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)