Fix useOutsideClick, add improvements for ShadowDOM (#1914)

RobinMalfait · theomessin · web-flow · commit 0e147a0c7599 · 2022-10-10T17:02:51.000+02:00
* Fix `useOutsideClick` not closing when clicking in ShadowDOM #1876 (comment) * use `getRootNode` in `useOutsideClick` for Vue * update changelog * run prettier Co-authored-by: Theodore Messinezis <7229472+theomessin@users.noreply.github.com>
diff --git 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 `<Popover.Button as={Fragment} />` 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-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) {
diff --git 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
 
diff --git 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') {

Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ export function useOutsideClick(`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`// Ignore if the target doesn't exist in the DOM anymore`
`63`		`- if (!target.ownerDocument.documentElement.contains(target)) return`
	`63`	`+ if (!target.getRootNode().contains(target)) return`
`64`	`64`
`65`	`65`	`// Ignore if the target exists in one of the containers`
`66`	`66`	`for (let container of _containers) {`
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ export function useOutsideClick(`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`// Ignore if the target doesn't exist in the DOM anymore`
`33`		`- if (!target.ownerDocument.documentElement.contains(target)) return`
	`33`	`+ if (!target.getRootNode().contains(target)) return`
`34`	`34`
`35`	`35`	`let _containers = (function resolve(containers): ContainerCollection {`
`36`	`36`	`if (typeof containers === 'function') {`