From 6ba4b1316882a6daa608e703cd199f63bb6052d9 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 26 Jul 2022 12:32:57 +0200 Subject: [PATCH 1/2] 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> --- packages/@headlessui-react/src/utils/render.ts | 9 +++++++-- packages/@headlessui-vue/src/utils/render.ts | 4 +++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/@headlessui-react/src/utils/render.ts b/packages/@headlessui-react/src/utils/render.ts index 7b949d82cb..ebcde66755 100644 --- a/packages/@headlessui-react/src/utils/render.ts +++ b/packages/@headlessui-react/src/utils/render.ts @@ -232,11 +232,16 @@ function mergeProps(...listOfProps: Props[]) { // 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/src/utils/render.ts b/packages/@headlessui-vue/src/utils/render.ts index 247a8db262..f8781b00ee 100644 --- a/packages/@headlessui-vue/src/utils/render.ts +++ b/packages/@headlessui-vue/src/utils/render.ts @@ -220,7 +220,9 @@ function mergeProps(...listOfProps: Record[]) { let handlers = eventHandlers[eventName] for (let handler of handlers) { - if (event?.defaultPrevented) return + if (event instanceof Event && event.defaultPrevented) { + return + } handler(event, ...args) } From 67d95543fc58f51f04d0b821653eaf30a9af2107 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Tue, 26 Jul 2022 12:37:21 +0200 Subject: [PATCH 2/2] update changelog --- packages/@headlessui-react/CHANGELOG.md | 1 + packages/@headlessui-vue/CHANGELOG.md | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index de7c914f74..8e047e5746 100644 --- 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-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index 37eb691226..16e1f9827a 100644 --- 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