fix event name casing

Vue broke this in a 3.0.5 release, it still worked in 3.0.4. Fixes: #267
tailwindlabs · Mar 15, 2021 · 70459c6 · 70459c6
1 parent 663ef17
commit 70459c6
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 32 deletions.
diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -260,7 +260,7 @@ export let ListboxButton = defineComponent({
         ? [dom(api.labelRef)?.id, this.id].join(' ')
         : undefined,
       disabled: api.disabled,
-      onKeyDown: this.handleKeyDown,
+      onKeydown: this.handleKeyDown,
       onClick: this.handleClick,
     }
 
@@ -337,7 +337,7 @@ export let ListboxOptions = defineComponent({
           : api.options.value[api.activeOptionIndex.value]?.id,
       'aria-labelledby': dom(api.labelRef)?.id ?? dom(api.buttonRef)?.id,
       id: this.id,
-      onKeyDown: this.handleKeyDown,
+      onKeydown: this.handleKeyDown,
       role: 'listbox',
       tabIndex: 0,
       ref: 'el',
@@ -509,10 +509,10 @@ export let ListboxOption = defineComponent({
         'aria-selected': selected.value === true ? selected.value : undefined,
         onClick: handleClick,
         onFocus: handleFocus,
-        onPointerMove: handleMove,
-        onMouseMove: handleMove,
-        onPointerLeave: handleLeave,
-        onMouseLeave: handleLeave,
+        onPointermove: handleMove,
+        onMousemove: handleMove,
+        onPointerleave: handleLeave,
+        onMouseleave: handleLeave,
       }
 
       return render({ props: { ...props, ...propsWeControl }, slot, attrs, slots })

diff --git a/packages/@headlessui-vue/src/components/menu/menu.ts b/packages/@headlessui-vue/src/components/menu/menu.ts
@@ -179,7 +179,7 @@ export let MenuButton = defineComponent({
       'aria-haspopup': true,
       'aria-controls': dom(api.itemsRef)?.id,
       'aria-expanded': api.menuState.value === MenuStates.Open ? true : undefined,
-      onKeyDown: this.handleKeyDown,
+      onKeydown: this.handleKeyDown,
       onClick: this.handleClick,
     }
 
@@ -258,7 +258,7 @@ export let MenuItems = defineComponent({
           : api.items.value[api.activeItemIndex.value]?.id,
       'aria-labelledby': dom(api.buttonRef)?.id,
       id: this.id,
-      onKeyDown: this.handleKeyDown,
+      onKeydown: this.handleKeyDown,
       role: 'menu',
       tabIndex: 0,
       ref: 'el',
@@ -429,10 +429,10 @@ export let MenuItem = defineComponent({
         'aria-disabled': disabled === true ? true : undefined,
         onClick: handleClick,
         onFocus: handleFocus,
-        onPointerMove: handleMove,
-        onMouseMove: handleMove,
-        onPointerLeave: handleLeave,
-        onMouseLeave: handleLeave,
+        onPointermove: handleMove,
+        onMousemove: handleMove,
+        onPointerleave: handleLeave,
+        onMouseleave: handleLeave,
       }
 
       return render({ props: { ...props, ...propsWeControl }, slot, attrs, slots })

diff --git a/packages/@headlessui-vue/src/components/switch/switch.ts b/packages/@headlessui-vue/src/components/switch/switch.ts
@@ -76,8 +76,8 @@ export let Switch = defineComponent({
       'aria-labelledby': labelledby.value,
       'aria-describedby': describedby.value,
       onClick: this.handleClick,
-      onKeyUp: this.handleKeyUp,
-      onKeyPress: this.handleKeyPress,
+      onKeyup: this.handleKeyUp,
+      onKeypress: this.handleKeyPress,
     }
 
     if (this.$props.as === 'button') {

diff --git a/packages/@headlessui-vue/src/test-utils/interactions.test.ts b/packages/@headlessui-vue/src/test-utils/interactions.test.ts
@@ -3,8 +3,8 @@ import { render } from './vue-testing-library'
 import { type, shift, Keys } from './interactions'
 import { defineComponent, h } from 'vue'
 
-type Events = 'onKeyDown' | 'onKeyUp' | 'onKeyPress' | 'onClick' | 'onBlur' | 'onFocus'
-let events: Events[] = ['onKeyDown', 'onKeyUp', 'onKeyPress', 'onClick', 'onBlur', 'onFocus']
+type Events = 'onKeydown' | 'onKeyup' | 'onKeypress' | 'onClick' | 'onBlur' | 'onFocus'
+let events: Events[] = ['onKeydown', 'onKeyup', 'onKeypress', 'onClick', 'onBlur', 'onFocus']
 
 function renderTemplate(input: string | Partial<Parameters<typeof defineComponent>[0]>) {
   let defaultComponents = {}
@@ -81,16 +81,16 @@ describe('Keyboard', () => {
       ],
 
       // Canceling keydown
-      ['a', ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
-      [Keys.Space, ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
-      [Keys.Enter, ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
-      [Keys.Tab, ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
-      [shift(Keys.Tab), ['keydown', 'keyup'], new Set<Events>(['onKeyDown'])],
+      ['a', ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
+      [Keys.Space, ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
+      [Keys.Enter, ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
+      [Keys.Tab, ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
+      [shift(Keys.Tab), ['keydown', 'keyup'], new Set<Events>(['onKeydown'])],
 
       // Canceling keypress
-      ['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyPress'])],
-      [Keys.Space, ['keydown', 'keypress', 'keyup', 'click'], new Set<Events>(['onKeyPress'])],
-      [Keys.Enter, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyPress'])],
+      ['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeypress'])],
+      [Keys.Space, ['keydown', 'keypress', 'keyup', 'click'], new Set<Events>(['onKeypress'])],
+      [Keys.Enter, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeypress'])],
       [
         Keys.Tab,
         [
@@ -99,7 +99,7 @@ describe('Keyboard', () => {
           event('focus', 'after'),
           event('keyup', 'after'),
         ],
-        new Set<Events>(['onKeyPress']),
+        new Set<Events>(['onKeypress']),
       ],
       [
         shift(Keys.Tab),
@@ -109,13 +109,13 @@ describe('Keyboard', () => {
           event('focus', 'before'),
           event('keyup', 'before'),
         ],
-        new Set<Events>(['onKeyPress']),
+        new Set<Events>(['onKeypress']),
       ],
 
       // Canceling keyup
-      ['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyUp'])],
-      [Keys.Space, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyUp'])],
-      [Keys.Enter, ['keydown', 'keypress', 'click', 'keyup'], new Set<Events>(['onKeyUp'])],
+      ['a', ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyup'])],
+      [Keys.Space, ['keydown', 'keypress', 'keyup'], new Set<Events>(['onKeyup'])],
+      [Keys.Enter, ['keydown', 'keypress', 'click', 'keyup'], new Set<Events>(['onKeyup'])],
       [
         Keys.Tab,
         [
@@ -124,7 +124,7 @@ describe('Keyboard', () => {
           event('focus', 'after'),
           event('keyup', 'after'),
         ],
-        new Set<Events>(['onKeyUp']),
+        new Set<Events>(['onKeyup']),
       ],
       [
         shift(Keys.Tab),
@@ -134,7 +134,7 @@ describe('Keyboard', () => {
           event('focus', 'before'),
           event('keyup', 'before'),
         ],
-        new Set<Events>(['onKeyUp']),
+        new Set<Events>(['onKeyup']),
       ],
 
       // Cancelling blur
@@ -189,7 +189,7 @@ describe('Keyboard', () => {
           Button: defineComponent({
             setup(_props, { slots, attrs }) {
               return () => {
-                return h('button', createProps(attrs.id as string), slots.default())
+                return h('button', createProps(attrs.id as string), slots.default!())
               }
             },
           }),