Improve event handler merging

packages/@headlessui-react/CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure controlled `Tabs` don't change automagically ([#1680](https://github.com/tailwindlabs/headlessui/pull/1680))
 - Don't scroll lock when a Transition + Dialog is mounted but hidden ([#1681](https://github.com/tailwindlabs/headlessui/pull/1681))
 - Improve outside click on Safari iOS ([#1712](https://github.com/tailwindlabs/headlessui/pull/1712))
+- Improve event handler merging ([#1715](https://github.com/tailwindlabs/headlessui/pull/1715))
 
 ## [1.6.6] - 2022-07-07
 

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

@@ -232,11 +232,16 @@ function mergeProps(...listOfProps: Props<any, any>[]) {
   // Merge event handlers
   for (let eventName in eventHandlers) {
     Object.assign(target, {
-      [eventName](event: { defaultPrevented: boolean }, ...args: any[]) {
+      [eventName](event: { nativeEvent?: Event; defaultPrevented: boolean }, ...args: any[]) {
         let handlers = eventHandlers[eventName]
 
         for (let handler of handlers) {
-          if (event.defaultPrevented) return
+          if (
+            (event instanceof Event || event?.nativeEvent instanceof Event) &&
+            event.defaultPrevented
+          ) {
+            return
+          }
 
           handler(event, ...args)
         }

packages/@headlessui-vue/CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Resync input when display value changes ([#1679](https://github.com/tailwindlabs/headlessui/pull/1679))
 - Ensure controlled `Tabs` don't change automagically ([#1680](https://github.com/tailwindlabs/headlessui/pull/1680))
 - Improve outside click on Safari iOS ([#1712](https://github.com/tailwindlabs/headlessui/pull/1712))
+- Improve event handler merging ([#1715](https://github.com/tailwindlabs/headlessui/pull/1715))
 
 ## [1.6.7] - 2022-07-12
 

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

@@ -220,7 +220,9 @@ function mergeProps(...listOfProps: Record<any, any>[]) {
         let handlers = eventHandlers[eventName]
 
         for (let handler of handlers) {
-          if (event?.defaultPrevented) return
+          if (event instanceof Event && event.defaultPrevented) {
+            return
+          }
 
           handler(event, ...args)
         }