From d4df76e181050724f6b6927802e014ff072babf3 Mon Sep 17 00:00:00 2001 From: Theodore Messinezis <7229472+theomessin@users.noreply.github.com> Date: Mon, 10 Oct 2022 14:41:57 +0100 Subject: [PATCH 1/4] Fix `useOutsideClick` not closing when clicking in ShadowDOM https://github.com/tailwindlabs/headlessui/pull/1876#issuecomment-1264742366 --- packages/@headlessui-react/src/hooks/use-outside-click.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@headlessui-react/src/hooks/use-outside-click.ts b/packages/@headlessui-react/src/hooks/use-outside-click.ts index 7f7360393b..6d64288995 100644 --- a/packages/@headlessui-react/src/hooks/use-outside-click.ts +++ b/packages/@headlessui-react/src/hooks/use-outside-click.ts @@ -60,7 +60,7 @@ export function useOutsideClick( } // Ignore if the target doesn't exist in the DOM anymore - if (!target.ownerDocument.documentElement.contains(target)) return + if(!target.getRootNode().contains(target)) return // Ignore if the target exists in one of the containers for (let container of _containers) { From aa7c341cf1b3f715c908f195bc669bdf83ffee91 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 10 Oct 2022 16:47:13 +0200 Subject: [PATCH 2/4] use `getRootNode` in `useOutsideClick` for Vue --- packages/@headlessui-vue/src/hooks/use-outside-click.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@headlessui-vue/src/hooks/use-outside-click.ts b/packages/@headlessui-vue/src/hooks/use-outside-click.ts index b89fead59a..3e25ca49d8 100644 --- a/packages/@headlessui-vue/src/hooks/use-outside-click.ts +++ b/packages/@headlessui-vue/src/hooks/use-outside-click.ts @@ -30,7 +30,7 @@ export function useOutsideClick( } // Ignore if the target doesn't exist in the DOM anymore - if (!target.ownerDocument.documentElement.contains(target)) return + if (!target.getRootNode().contains(target)) return let _containers = (function resolve(containers): ContainerCollection { if (typeof containers === 'function') { From 2146cef7d1990050ef798e6c2b93d410e8ac1938 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 10 Oct 2022 16:55:36 +0200 Subject: [PATCH 3/4] 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 6331be9bf6..d7701e00e3 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix `` crash ([#1889](https://github.com/tailwindlabs/headlessui/pull/1889)) - Expose `close` function for `Menu` and `Menu.Item` components ([#1897](https://github.com/tailwindlabs/headlessui/pull/1897)) +- Fix `useOutsideClick`, add improvements for ShadowDOM ([#1914](https://github.com/tailwindlabs/headlessui/pull/1914)) ### Added diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index 9d7c206212..20fac0e689 100644 --- a/packages/@headlessui-vue/CHANGELOG.md +++ b/packages/@headlessui-vue/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Expose `close` function for `Menu` and `MenuItem` components ([#1897](https://github.com/tailwindlabs/headlessui/pull/1897)) +- Fix `useOutsideClick`, add improvements for ShadowDOM ([#1914](https://github.com/tailwindlabs/headlessui/pull/1914)) ## [1.7.3] - 2022-09-30 From 225f4e90a14a3d5df7e310d8f55c36f8af1b7b66 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 10 Oct 2022 17:00:27 +0200 Subject: [PATCH 4/4] run prettier --- packages/@headlessui-react/src/hooks/use-outside-click.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@headlessui-react/src/hooks/use-outside-click.ts b/packages/@headlessui-react/src/hooks/use-outside-click.ts index 6d64288995..1569d9cedc 100644 --- a/packages/@headlessui-react/src/hooks/use-outside-click.ts +++ b/packages/@headlessui-react/src/hooks/use-outside-click.ts @@ -60,7 +60,7 @@ export function useOutsideClick( } // Ignore if the target doesn't exist in the DOM anymore - if(!target.getRootNode().contains(target)) return + if (!target.getRootNode().contains(target)) return // Ignore if the target exists in one of the containers for (let container of _containers) {