Fix useOutsideClick swallowing events inside ShadowDOM (#1886)

* check inside shadow dom for use-outside-click

* update changelog

Co-authored-by: Raphael Melloni <[email protected]>

Author: RobinMalfait

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
 

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

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
 

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