fix: double onClose on mobile dialog outClick (#2690)

* fix: double onClose on mobile dialog outClick

* Fix CS

* Add fix to Vue useOutsideClick

* Update changelog

* Fix CS

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>

Author: DavideFrancescon

packages/@headlessui-react/CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Don't call `<Dialog>`'s `onClose` twice on mobile devices ([#2690](https://github.com/tailwindlabs/headlessui/pull/2690))
 
 ## [1.7.17] - 2023-08-17
 

packages/@headlessui-react/src/hooks/use-outside-click.ts

@@ -2,6 +2,7 @@ import { MutableRefObject, useEffect, useRef } from 'react'
 import { FocusableMode, isFocusableElement } from '../utils/focus-management'
 import { useDocumentEvent } from './use-document-event'
 import { useWindowEvent } from './use-window-event'
+import { isMobile } from '../utils/platform'
 
 type Container = MutableRefObject<HTMLElement | null> | HTMLElement | null
 type ContainerCollection = Container[] | Set<Container>
@@ -125,6 +126,10 @@ export function useOutsideClick(
   useDocumentEvent(
     'click',
     (event) => {
+      if (isMobile()) {
+        return
+      }
+
       if (!initialClickTarget.current) {
         return
       }

packages/@headlessui-vue/CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Don't call `<Dialog>`'s `onClose` twice on mobile devices ([#2690](https://github.com/tailwindlabs/headlessui/pull/2690))
 
 ## [1.7.16] - 2023-08-17
 

packages/@headlessui-vue/src/hooks/use-outside-click.ts

@@ -3,6 +3,7 @@ import { FocusableMode, isFocusableElement } from '../utils/focus-management'
 import { dom } from '../utils/dom'
 import { useDocumentEvent } from './use-document-event'
 import { useWindowEvent } from './use-window-event'
+import { isMobile } from '../utils/platform'
 
 type Container = Ref<HTMLElement | null> | HTMLElement | null
 type ContainerCollection = Container[] | Set<Container>
@@ -108,6 +109,10 @@ export function useOutsideClick(
   useDocumentEvent(
     'click',
     (event) => {
+      if (isMobile()) {
+        return
+      }
+
       if (!initialClickTarget.value) {
         return
       }