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

diff --git a/packages/runtime-dom/__tests__/directives/vOn.spec.ts b/packages/runtime-dom/__tests__/directives/vOn.spec.ts
index fda9d6c030d334649e433b17b23cd05584e820d7..a9d3271333180968b2d870832c120f87f0109d3d 100644 (file)
--- 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 b8b91d48197f469437d021793140028d2570d685..f2f11622dd6aefbec5b1c2e1d1b1b590c5c153aa 100644 (file)
--- 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)