Improve outside click on Safari iOS

packages/@headlessui-react/CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Resync input when display value changes ([#1679](https://github.com/tailwindlabs/headlessui/pull/1679))
 - Ensure controlled `Tabs` don't change automagically ([#1680](https://github.com/tailwindlabs/headlessui/pull/1680))
 - Don't scroll lock when a Transition + Dialog is mounted but hidden ([#1681](https://github.com/tailwindlabs/headlessui/pull/1681))
+- Improve outside click on Safari iOS ([#1712](https://github.com/tailwindlabs/headlessui/pull/1712))
 
 ## [1.6.6] - 2022-07-07
 

packages/@headlessui-react/src/hooks/use-document-event.ts

@@ -0,0 +1,20 @@
+import { useEffect } from 'react'
+
+import { useLatestValue } from './use-latest-value'
+
+export function useDocumentEvent<TType extends keyof DocumentEventMap>(
+  type: TType,
+  listener: (ev: DocumentEventMap[TType]) => any,
+  options?: boolean | AddEventListenerOptions
+) {
+  let listenerRef = useLatestValue(listener)
+
+  useEffect(() => {
+    function handler(event: DocumentEventMap[TType]) {
+      listenerRef.current(event)
+    }
+
+    document.addEventListener(type, handler, options)
+    return () => document.removeEventListener(type, handler, options)
+  }, [type, options])
+}

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

@@ -1,6 +1,6 @@
 import { MutableRefObject, useEffect, useRef } from 'react'
 import { FocusableMode, isFocusableElement } from '../utils/focus-management'
-import { useWindowEvent } from './use-window-event'
+import { useDocumentEvent } from './use-document-event'
 
 type Container = MutableRefObject<HTMLElement | null> | HTMLElement | null
 type ContainerCollection = Container[] | Set<Container>
@@ -92,7 +92,7 @@ export function useOutsideClick(
 
   let initialClickTarget = useRef<EventTarget | null>(null)
 
-  useWindowEvent(
+  useDocumentEvent(
     'mousedown',
     (event) => {
       if (enabledRef.current) {
@@ -102,7 +102,7 @@ export function useOutsideClick(
     true
   )
 
-  useWindowEvent(
+  useDocumentEvent(
     'click',
     (event) => {
       if (!initialClickTarget.current) {
@@ -130,7 +130,7 @@ export function useOutsideClick(
   // In this case we care only about the first case so we check to see if the active element is the iframe
   // If so this was because of a click, focus, or other interaction with the child iframe
   // and we can consider it an "outside click"
-  useWindowEvent(
+  useDocumentEvent(
     'blur',
     (event) =>
       handleOutsideClick(event, () =>

packages/@headlessui-vue/CHANGELOG.md

@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Close `Menu` component when using `tab` key ([#1673](https://github.com/tailwindlabs/headlessui/pull/1673))
 - Resync input when display value changes ([#1679](https://github.com/tailwindlabs/headlessui/pull/1679))
 - Ensure controlled `Tabs` don't change automagically ([#1680](https://github.com/tailwindlabs/headlessui/pull/1680))
+- Improve outside click on Safari iOS ([#1712](https://github.com/tailwindlabs/headlessui/pull/1712))
 
 ## [1.6.7] - 2022-07-12
 

packages/@headlessui-vue/src/hooks/use-document-event.ts

@@ -0,0 +1,15 @@
+import { watchEffect } from 'vue'
+import { isServer } from '../utils/ssr'
+
+export function useDocumentEvent<TType extends keyof DocumentEventMap>(
+  type: TType,
+  listener: (this: Document, ev: DocumentEventMap[TType]) => any,
+  options?: boolean | AddEventListenerOptions
+) {
+  if (isServer) return
+
+  watchEffect((onInvalidate) => {
+    document.addEventListener(type, listener, options)
+    onInvalidate(() => document.removeEventListener(type, listener, options))
+  })
+}

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

@@ -1,7 +1,7 @@
-import { useWindowEvent } from './use-window-event'
 import { computed, Ref, ComputedRef, ref } from 'vue'
 import { FocusableMode, isFocusableElement } from '../utils/focus-management'
 import { dom } from '../utils/dom'
+import { useDocumentEvent } from './use-document-event'
 
 type Container = Ref<HTMLElement | null> | HTMLElement | null
 type ContainerCollection = Container[] | Set<Container>
@@ -78,7 +78,7 @@ export function useOutsideClick(
 
   let initialClickTarget = ref<EventTarget | null>(null)
 
-  useWindowEvent(
+  useDocumentEvent(
     'mousedown',
     (event) => {
       if (enabled.value) {
@@ -88,7 +88,7 @@ export function useOutsideClick(
     true
   )
 
-  useWindowEvent(
+  useDocumentEvent(
     'click',
     (event) => {
       if (!initialClickTarget.value) {
@@ -116,7 +116,7 @@ export function useOutsideClick(
   // In this case we care only about the first case so we check to see if the active element is the iframe
   // If so this was because of a click, focus, or other interaction with the child iframe
   // and we can consider it an "outside click"
-  useWindowEvent(
+  useDocumentEvent(
     'blur',
     (event) =>
       handleOutsideClick(event, () =>

packages/playground-vue/src/components/dialog/dialog.vue

@@ -26,7 +26,7 @@
             leaveTo="opacity-0"
             entered="opacity-75"
           >
-            <DialogOverlay className="fixed inset-0 bg-gray-500 transition-opacity" />
+            <div className="fixed inset-0 bg-gray-500 transition-opacity" />
           </TransitionChild>
 
           <TransitionChild
@@ -41,7 +41,7 @@
             <span class="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
               &#8203;
             </span>
-            <div
+            <DialogPanel
               class="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle"
             >
               <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
@@ -172,7 +172,7 @@
                   Cancel
                 </button>
               </div>
-            </div>
+            </DialogPanel>
           </TransitionChild>
         </div>
       </div>
@@ -186,6 +186,7 @@ import {
   Dialog,
   DialogTitle,
   DialogOverlay,
+  DialogPanel,
   Menu,
   MenuButton,
   MenuItems,
@@ -268,6 +269,7 @@ export default {
     Dialog,
     DialogTitle,
     DialogOverlay,
+    DialogPanel,
     Menu,
     MenuButton,
     MenuItems,