Cannot read property 'defaultPrevented' of undefined

[Mookiepiece]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.6.6

What browser are you using?

N/A

Reproduction URL

https://codesandbox.io/s/busy-heisenberg-50vxqe-50vxqe?file=/src/App.tsx

Describe your issue

• Click "Expand"
• Click "Close"
• Throws: Cannot read property 'defaultPrevented' of undefined

---

I'm using Transition component with as={React.Fragment} to let classNames attached to it's child, but got an error when an event handler called with no arguments. I think not all event handlers needs arguments e.g. onMounted().

We are assuming that the first argument is an object:

headlessui/packages/@headlessui-react/src/utils/render.ts

Lines 235 to 240 in 5af3bd4

	[eventName](event: { defaultPrevented: boolean }, ...args: any[]) {
	let handlers = eventHandlers[eventName]
	for (let handler of handlers) {
	if (event.defaultPrevented) return

On the other hand, we applied optional chaining to @headlessui/vue at the same place, that works but does not matches its declaration:

headlessui/packages/@headlessui-vue/src/utils/render.ts

Lines 219 to 223 in 5af3bd4

	[eventName](event: { defaultPrevented: boolean }, ...args: any[]) {
	let handlers = eventHandlers[eventName]
	for (let handler of handlers) {
	if (event?.defaultPrevented) return

And considering they may called with object literals like onChange({ ...foo, defaultPrevented: 0 }), here's my suggestion:

    Object.assign(target, {
      [eventName](event: unknown, ...args: any[]) {
        if (event instanceof Event && event.defaultPrevented) return
       // ...
      }
    )

[RobinMalfait]

Hey! Thank you for your suggestion!
Much appreciated! 🙏

This should be fixed by #1715, and will be available in the next release. I also marked you as a co-author because of your initial work here. I had to deal with the SyntethicEvents from React but that's been taken care of now. Thanks!

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.