Improve event handler merging (#1715)

* improve event handler merging This will ensure that an actual event is passed before checking the `event.defaultPrevented`. For React, we also have to make sure that we are not dealing with a SyntehticEvent. Thanks @Mookiepiece! Co-authored-by: =?UTF-8?q?=E5=BD=BC=E8=A1=93=E5=90=91?= <48076971+Mookiepiece@users.noreply.github.com> * update changelog Co-authored-by: =?UTF-8?q?=E5=BD=BC=E8=A1=93=E5=90=91?= <48076971+Mookiepiece@users.noreply.github.com>
tailwindlabs · Jul 26, 2022 · 42db5b0 · 42db5b0
1 parent b2c4023
commit 42db5b0
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/packages/@headlessui-react/CHANGELOG.md b/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
 

diff --git a/packages/@headlessui-react/src/utils/render.ts b/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)
         }

diff --git a/packages/@headlessui-vue/CHANGELOG.md b/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
 

diff --git a/packages/@headlessui-vue/src/utils/render.ts b/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)
         }