Skip to content

Commit

Permalink
fix: fix the bug: kebab-case events are attached as lower case on web…
Browse files Browse the repository at this point in the history
… components, see #2841
  • Loading branch information
shadowings-zy committed Feb 3, 2021
1 parent b81d279 commit 5dcf45c
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 2 deletions.
26 changes: 26 additions & 0 deletions packages/runtime-dom/__tests__/patchEvents.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
})
4 changes: 2 additions & 2 deletions packages/runtime-dom/src/modules/events.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { isArray } from '@vue/shared'
import { hyphenate, isArray } from '@vue/shared'
import {
ComponentInternalInstance,
callWithAsyncErrorHandling
Expand Down Expand Up @@ -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(
Expand Down

0 comments on commit 5dcf45c

Please sign in to comment.