fix: kebab-case events are attached correctly on web components, see #2841 (#2847)

diff --git a/packages/runtime-dom/__tests__/patchEvents.spec.ts b/packages/runtime-dom/__tests__/patchEvents.spec.ts
index a9145f40d9a2da36a704d91262d089b6dcae8002..9c30616a24aa0a38c4b9d30b213f742d1effb9bb 100644 (file)
--- a/packages/runtime-dom/__tests__/patchEvents.spec.ts
+++ b/packages/runtime-dom/__tests__/patchEvents.spec.ts
@@ -153,4 +153,30 @@ describe(`runtime-dom: events patching`, () => {
     expect(prevFn).toHaveBeenCalledTimes(2)
     expect(nextFn).toHaveBeenCalledTimes(4)
   })
+
+  // #2841
+  test('should patch event correctly in web-components', async () => {
+    class TestElement extends HTMLElement {
+      constructor() {
+        super()
+      }
+    }
+    window.customElements.define('test-element', TestElement)
+    const testElement = document.createElement('test-element', {
+      is: 'test-element'
+    })
+    const fn1 = jest.fn()
+    const fn2 = jest.fn()
+
+    // in webComponents, @foo-bar will patch prop 'onFooBar'
+    // and @foobar will patch prop 'onFoobar'
+
+    patchProp(testElement, 'onFooBar', null, fn1)
+    testElement.dispatchEvent(new CustomEvent('foo-bar'))
+    expect(fn1).toHaveBeenCalledTimes(1)
+
+    patchProp(testElement, 'onFoobar', null, fn2)
+    testElement.dispatchEvent(new CustomEvent('foobar'))
+    expect(fn2).toHaveBeenCalledTimes(1)
+  })
 })

diff --git a/packages/runtime-dom/src/modules/events.ts b/packages/runtime-dom/src/modules/events.ts
index 3c3335a53634905088938d6de95a5a2fed02dfe6..a81b6fdf3f099754a46ac715006c2f0033501750 100644 (file)
--- a/packages/runtime-dom/src/modules/events.ts
+++ b/packages/runtime-dom/src/modules/events.ts
@@ -1,4 +1,4 @@
-import { isArray } from '@vue/shared'
+import { hyphenate, isArray } from '@vue/shared'
 import {
   ComponentInternalInstance,
   callWithAsyncErrorHandling
@@ -96,7 +96,7 @@ function parseName(name: string): [string, EventListenerOptions | undefined] {
       options
     }
   }
-  return [name.slice(2).toLowerCase(), options]
+  return [hyphenate(name.slice(2)), options]
 }
 
 function createInvoker(