Improve outside click support

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix `hover` scroll ([#1161](https://github.com/tailwindlabs/headlessui/pull/1161))
 - Guarantee DOM sort order when performing actions ([#1168](https://github.com/tailwindlabs/headlessui/pull/1168))
 - Fix `<Transition>` flickering issue ([#1118](https://github.com/tailwindlabs/headlessui/pull/1118))
+- Improve outside click support ([#1175](https://github.com/tailwindlabs/headlessui/pull/1175))
 
 ## [Unreleased - @headlessui/vue]
 
@@ -26,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure links are triggered inside `Popover Panel` components ([#1153](https://github.com/tailwindlabs/headlessui/pull/1153))
 - Fix `hover` scroll ([#1161](https://github.com/tailwindlabs/headlessui/pull/1161))
 - Guarantee DOM sort order when performing actions ([#1168](https://github.com/tailwindlabs/headlessui/pull/1168))
+- Improve outside click support ([#1175](https://github.com/tailwindlabs/headlessui/pull/1175))
 
 ## [@headlessui/react@v1.5.0] - 2022-02-17
 

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -30,7 +30,7 @@ import { disposables } from '../../utils/disposables'
 import { Keys } from '../keyboard'
 import { Focus, calculateActiveIndex } from '../../utils/calculate-active-index'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
-import { useWindowEvent } from '../../hooks/use-window-event'
+import { useOutsideClick } from '../../hooks/use-outside-click'
 import { useOpenClosed, State, OpenClosedProvider } from '../../internal/open-closed'
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { useLatestValue } from '../../hooks/use-latest-value'
@@ -302,15 +302,9 @@ let ComboboxRoot = forwardRefWithAs(function Combobox<
   useIsoMorphicEffect(() => dispatch({ type: ActionTypes.SetDisabled, disabled }), [disabled])
 
   // Handle outside click
-  useWindowEvent('mousedown', (event) => {
-    let target = event.target as HTMLElement
-
+  useOutsideClick([buttonRef, inputRef, optionsRef], () => {
     if (comboboxState !== ComboboxStates.Open) return
 
-    if (buttonRef.current?.contains(target)) return
-    if (inputRef.current?.contains(target)) return
-    if (optionsRef.current?.contains(target)) return
-
     dispatch({ type: ActionTypes.CloseCombobox })
   })
 

packages/@headlessui-react/src/components/dialog/dialog.tsx

@@ -33,6 +33,7 @@ import { useWindowEvent } from '../../hooks/use-window-event'
 import { useOpenClosed, State } from '../../internal/open-closed'
 import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complete'
 import { StackProvider, StackMessage } from '../../internal/stack-context'
+import { useOutsideClick } from '../../hooks/use-outside-click'
 
 enum DialogStates {
   Open,
@@ -207,12 +208,9 @@ let DialogRoot = forwardRefWithAs(function Dialog<
   useInertOthers(internalDialogRef, hasNestedDialogs ? enabled : false)
 
   // Handle outside click
-  useWindowEvent('mousedown', (event) => {
-    let target = event.target as HTMLElement
-
+  useOutsideClick(internalDialogRef, () => {
     if (dialogState !== DialogStates.Open) return
     if (hasNestedDialogs) return
-    if (internalDialogRef.current?.contains(target)) return
 
     close()
   })

packages/@headlessui-react/src/components/listbox/listbox.tsx

@@ -30,9 +30,9 @@ import { Keys } from '../keyboard'
 import { Focus, calculateActiveIndex } from '../../utils/calculate-active-index'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { isFocusableElement, FocusableMode, sortByDomNode } from '../../utils/focus-management'
-import { useWindowEvent } from '../../hooks/use-window-event'
 import { useOpenClosed, State, OpenClosedProvider } from '../../internal/open-closed'
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
+import { useOutsideClick } from '../../hooks/use-outside-click'
 
 enum ListboxStates {
   Open,
@@ -281,14 +281,9 @@ let ListboxRoot = forwardRefWithAs(function Listbox<
   )
 
   // Handle outside click
-  useWindowEvent('mousedown', (event) => {
-    let target = event.target as HTMLElement
-
+  useOutsideClick([buttonRef, optionsRef], (event, target) => {
     if (listboxState !== ListboxStates.Open) return
 
-    if (buttonRef.current?.contains(target)) return
-    if (optionsRef.current?.contains(target)) return
-
     dispatch({ type: ActionTypes.CloseListbox })
 
     if (!isFocusableElement(target, FocusableMode.Loose)) {

packages/@headlessui-react/src/components/menu/menu.tsx

@@ -31,7 +31,7 @@ import { Keys } from '../keyboard'
 import { Focus, calculateActiveIndex } from '../../utils/calculate-active-index'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { isFocusableElement, FocusableMode, sortByDomNode } from '../../utils/focus-management'
-import { useWindowEvent } from '../../hooks/use-window-event'
+import { useOutsideClick } from '../../hooks/use-outside-click'
 import { useTreeWalker } from '../../hooks/use-tree-walker'
 import { useOpenClosed, State, OpenClosedProvider } from '../../internal/open-closed'
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
@@ -219,14 +219,9 @@ let MenuRoot = forwardRefWithAs(function Menu<TTag extends ElementType = typeof
   let menuRef = useSyncRefs(ref)
 
   // Handle outside click
-  useWindowEvent('mousedown', (event) => {
-    let target = event.target as HTMLElement
-
+  useOutsideClick([buttonRef, itemsRef], (event, target) => {
     if (menuState !== MenuStates.Open) return
 
-    if (buttonRef.current?.contains(target)) return
-    if (itemsRef.current?.contains(target)) return
-
     dispatch({ type: ActionTypes.CloseMenu })
 
     if (!isFocusableElement(target, FocusableMode.Loose)) {

packages/@headlessui-react/src/components/popover/popover.tsx

@@ -36,6 +36,7 @@ import {
 import { useWindowEvent } from '../../hooks/use-window-event'
 import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
+import { useOutsideClick } from '../../hooks/use-outside-click'
 
 enum PopoverStates {
   Open,
@@ -218,14 +219,9 @@ let PopoverRoot = forwardRefWithAs(function Popover<
   )
 
   // Handle outside click
-  useWindowEvent('mousedown', (event) => {
-    let target = event.target as HTMLElement
-
+  useOutsideClick([button, panel], (event, target) => {
     if (popoverState !== PopoverStates.Open) return
 
-    if (button?.contains(target)) return
-    if (panel?.contains(target)) return
-
     dispatch({ type: ActionTypes.ClosePopover })
 
     if (!isFocusableElement(target, FocusableMode.Loose)) {

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

@@ -0,0 +1,63 @@
+import { MutableRefObject, useMemo, useRef } from 'react'
+import { useLatestValue } from './use-latest-value'
+import { useWindowEvent } from './use-window-event'
+
+// Polyfill
+function microTask(cb: () => void) {
+  if (typeof queueMicrotask === 'function') {
+    queueMicrotask(cb)
+  } else {
+    Promise.resolve()
+      .then(cb)
+      .catch((e) =>
+        setTimeout(() => {
+          throw e
+        })
+      )
+  }
+}
+
+export function useOutsideClick(
+  containers:
+    | HTMLElement
+    | MutableRefObject<HTMLElement | null>
+    | (MutableRefObject<HTMLElement | null> | HTMLElement | null)[]
+    | Set<HTMLElement>,
+  cb: (event: MouseEvent | PointerEvent, target: HTMLElement) => void
+) {
+  let _containers = useMemo(() => {
+    if (Array.isArray(containers)) {
+      return containers
+    }
+
+    if (containers instanceof Set) {
+      return containers
+    }
+
+    return [containers]
+  }, [containers])
+
+  let called = useRef(false)
+  let handler = useLatestValue((event: MouseEvent | PointerEvent) => {
+    if (called.current) return
+    called.current = true
+    microTask(() => {
+      called.current = false
+    })
+
+    let target = event.target as HTMLElement
+
+    for (let container of _containers) {
+      if (container === null) continue
+      let domNode = container instanceof HTMLElement ? container : container.current
+      if (domNode?.contains(target)) {
+        return
+      }
+    }
+
+    return cb(event, target)
+  })
+
+  useWindowEvent('pointerdown', (...args) => handler.current(...args))
+  useWindowEvent('mousedown', (...args) => handler.current(...args))
+}

packages/@headlessui-vue/src/components/combobox/combobox.ts

@@ -21,12 +21,12 @@ import { useId } from '../../hooks/use-id'
 import { Keys } from '../../keyboard'
 import { calculateActiveIndex, Focus } from '../../utils/calculate-active-index'
 import { dom } from '../../utils/dom'
-import { useWindowEvent } from '../../hooks/use-window-event'
 import { useOpenClosed, State, useOpenClosedProvider } from '../../internal/open-closed'
 import { match } from '../../utils/match'
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { useTreeWalker } from '../../hooks/use-tree-walker'
 import { sortByDomNode } from '../../utils/focus-management'
+import { useOutsideClick } from '../../hooks/use-outside-click'
 
 enum ComboboxStates {
   Open,
@@ -229,15 +229,9 @@ export let Combobox = defineComponent({
       },
     }
 
-    useWindowEvent('mousedown', (event) => {
-      let target = event.target as HTMLElement
-
+    // Handle outside click
+    useOutsideClick([inputRef, buttonRef, optionsRef], () => {
       if (comboboxState.value !== ComboboxStates.Open) return
-
-      if (dom(inputRef)?.contains(target)) return
-      if (dom(buttonRef)?.contains(target)) return
-      if (dom(optionsRef)?.contains(target)) return
-
       api.closeCombobox()
     })
 

packages/@headlessui-vue/src/components/dialog/dialog.ts

@@ -23,7 +23,6 @@ import { Keys } from '../../keyboard'
 import { useId } from '../../hooks/use-id'
 import { useFocusTrap } from '../../hooks/use-focus-trap'
 import { useInertOthers } from '../../hooks/use-inert-others'
-import { contains } from '../../internal/dom-containers'
 import { useWindowEvent } from '../../hooks/use-window-event'
 import { Portal, PortalGroup } from '../portal/portal'
 import { StackMessage, useStackProvider } from '../../internal/stack-context'
@@ -32,6 +31,7 @@ import { ForcePortalRoot } from '../../internal/portal-force-root'
 import { Description, useDescriptions } from '../description/description'
 import { dom } from '../../utils/dom'
 import { useOpenClosed, State } from '../../internal/open-closed'
+import { useOutsideClick } from '../../hooks/use-outside-click'
 
 enum DialogStates {
   Open,
@@ -158,12 +158,9 @@ export let Dialog = defineComponent({
     provide(DialogContext, api)
 
     // Handle outside click
-    useWindowEvent('mousedown', (event) => {
-      let target = event.target as HTMLElement
-
+    useOutsideClick(containers.value, (_event, target) => {
       if (dialogState.value !== DialogStates.Open) return
       if (containers.value.size !== 1) return
-      if (contains(containers.value, target)) return
 
       api.close()
       nextTick(() => target?.focus())

packages/@headlessui-vue/src/components/listbox/listbox.ts

@@ -20,11 +20,11 @@ import { useId } from '../../hooks/use-id'
 import { Keys } from '../../keyboard'
 import { calculateActiveIndex, Focus } from '../../utils/calculate-active-index'
 import { dom } from '../../utils/dom'
-import { useWindowEvent } from '../../hooks/use-window-event'
 import { useOpenClosed, State, useOpenClosedProvider } from '../../internal/open-closed'
 import { match } from '../../utils/match'
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { sortByDomNode } from '../../utils/focus-management'
+import { useOutsideClick } from '../../hooks/use-outside-click'
 
 enum ListboxStates {
   Open,
@@ -219,12 +219,11 @@ export let Listbox = defineComponent({
       },
     }
 
-    useWindowEvent('mousedown', (event) => {
-      let target = event.target as HTMLElement
+    // Handle outside click
+    useOutsideClick(buttonRef, (event, target) => {
       let active = document.activeElement
 
       if (listboxState.value !== ListboxStates.Open) return
-      if (dom(buttonRef)?.contains(target)) return
 
       if (!dom(optionsRef)?.contains(target)) api.closeListbox()
       if (active !== document.body && active?.contains(target)) return // Keep focus on newly clicked/focused element

packages/@headlessui-vue/src/components/menu/menu.ts

@@ -16,12 +16,12 @@ import { useId } from '../../hooks/use-id'
 import { Keys } from '../../keyboard'
 import { Focus, calculateActiveIndex } from '../../utils/calculate-active-index'
 import { dom } from '../../utils/dom'
-import { useWindowEvent } from '../../hooks/use-window-event'
 import { useTreeWalker } from '../../hooks/use-tree-walker'
 import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
 import { match } from '../../utils/match'
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 import { sortByDomNode } from '../../utils/focus-management'
+import { useOutsideClick } from '../../hooks/use-outside-click'
 
 enum MenuStates {
   Open,
@@ -170,12 +170,11 @@ export let Menu = defineComponent({
       },
     }
 
-    useWindowEvent('mousedown', (event) => {
-      let target = event.target as HTMLElement
+    // Handle outside click
+    useOutsideClick(buttonRef, (event, target) => {
       let active = document.activeElement
 
       if (menuState.value !== MenuStates.Open) return
-      if (dom(buttonRef)?.contains(target)) return
 
       if (!dom(itemsRef)?.contains(target)) api.closeMenu()
       if (active !== document.body && active?.contains(target)) return // Keep focus on newly clicked/focused element

packages/@headlessui-vue/src/components/popover/popover.ts

@@ -28,6 +28,7 @@ import { dom } from '../../utils/dom'
 import { useWindowEvent } from '../../hooks/use-window-event'
 import { useOpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
 import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
+import { useOutsideClick } from '../../hooks/use-outside-click'
 
 enum PopoverStates {
   Open,
@@ -175,14 +176,9 @@ export let Popover = defineComponent({
     )
 
     // Handle outside click
-    useWindowEvent('mousedown', (event: MouseEvent) => {
-      let target = event.target as HTMLElement
-
+    useOutsideClick([button, panel], (event, target) => {
       if (popoverState.value !== PopoverStates.Open) return
 
-      if (dom(button)?.contains(target)) return
-      if (dom(panel)?.contains(target)) return
-
       api.closePopover()
 
       if (!isFocusableElement(target, FocusableMode.Loose)) {