From e7cfb050369208bc09a23746358d559d37b55bbf Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Thu, 29 Sep 2022 12:14:01 +0200 Subject: [PATCH] Fix `useOutsideClick` swallowing events inside ShadowDOM (#1886) * check inside shadow dom for use-outside-click * update changelog Co-authored-by: Raphael Melloni --- packages/@headlessui-react/CHANGELOG.md | 1 + packages/@headlessui-react/src/hooks/use-outside-click.ts | 2 +- packages/@headlessui-vue/CHANGELOG.md | 1 + packages/@headlessui-vue/src/hooks/use-outside-click.ts | 2 +- 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 8a84e31..bd25204 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Improve `Portal` detection for `Popover` components ([#1842](https://github.com/tailwindlabs/headlessui/pull/1842)) +- Fix `useOutsideClick` swallowing events inside ShadowDOM ([#1876](https://github.com/tailwindlabs/headlessui/pull/1876)) ## [1.7.2] - 2022-09-15 diff --git a/packages/@headlessui-react/src/hooks/use-outside-click.ts b/packages/@headlessui-react/src/hooks/use-outside-click.ts index d877d96..7f73603 100644 --- a/packages/@headlessui-react/src/hooks/use-outside-click.ts +++ b/packages/@headlessui-react/src/hooks/use-outside-click.ts @@ -96,7 +96,7 @@ export function useOutsideClick( 'mousedown', (event) => { if (enabledRef.current) { - initialClickTarget.current = event.target + initialClickTarget.current = event.composedPath?.()?.[0] || event.target } }, true diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index 18329d6..7edfe6a 100644 --- a/packages/@headlessui-vue/CHANGELOG.md +++ b/packages/@headlessui-vue/CHANGELOG.md @@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Call `displayValue` with a v-model of `ref(undefined)` on `ComboboxInput` ([#1865](https://github.com/tailwindlabs/headlessui/pull/1865)) - Improve `Portal` detection for `Popover` components ([#1842](https://github.com/tailwindlabs/headlessui/pull/1842)) - Fix crash when `children` are `undefined` ([#1885](https://github.com/tailwindlabs/headlessui/pull/1885)) +- Fix `useOutsideClick` swallowing events inside ShadowDOM ([#1876](https://github.com/tailwindlabs/headlessui/pull/1876)) ## [1.7.2] - 2022-09-15 diff --git a/packages/@headlessui-vue/src/hooks/use-outside-click.ts b/packages/@headlessui-vue/src/hooks/use-outside-click.ts index 5083ccf..b89fead 100644 --- a/packages/@headlessui-vue/src/hooks/use-outside-click.ts +++ b/packages/@headlessui-vue/src/hooks/use-outside-click.ts @@ -82,7 +82,7 @@ export function useOutsideClick( 'mousedown', (event) => { if (enabled.value) { - initialClickTarget.value = event.target + initialClickTarget.value = event.composedPath?.()?.[0] || event.target } }, true