From ab75bc64e61cdbeb7c072f58e543e451d5b12b7e Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 29 Jan 2021 21:40:45 +0100
Subject: [PATCH] trigger "outside click" behaviour on mousedown

Fixes: #95
---
 packages/@headlessui-react/src/components/listbox/listbox.tsx | 4 ++--
 packages/@headlessui-react/src/components/menu/menu.tsx       | 4 ++--
 packages/@headlessui-vue/src/components/listbox/listbox.ts    | 4 ++--
 packages/@headlessui-vue/src/components/menu/menu.ts          | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
index 8083faea9d..13a3d0ed08 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -186,8 +186,8 @@ export function Listbox<
       if (!event.defaultPrevented) buttonRef.current?.focus({ preventScroll: true })
     }
 
-    window.addEventListener('click', handler)
-    return () => window.removeEventListener('click', handler)
+    window.addEventListener('mousedown', handler)
+    return () => window.removeEventListener('mousedown', handler)
   }, [listboxState, optionsRef, buttonRef, d, dispatch])
 
   const propsBag = React.useMemo<ListboxRenderPropArg>(
diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
index 5fe647aefd..c07c7e3af4 100644
--- a/packages/@headlessui-react/src/components/menu/menu.tsx
+++ b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -162,8 +162,8 @@ export function Menu<TTag extends React.ElementType = typeof DEFAULT_MENU_TAG>(
       if (!event.defaultPrevented) buttonRef.current?.focus({ preventScroll: true })
     }
 
-    window.addEventListener('click', handler)
-    return () => window.removeEventListener('click', handler)
+    window.addEventListener('mousedown', handler)
+    return () => window.removeEventListener('mousedown', handler)
   }, [menuState, itemsRef, buttonRef, dispatch])
 
   const propsBag = React.useMemo(() => ({ open: menuState === MenuStates.Open }), [menuState])
diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
index 26dd202e2f..380726e734 100644
--- a/packages/@headlessui-vue/src/components/listbox/listbox.ts
+++ b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -171,8 +171,8 @@ export const Listbox = defineComponent({
         if (!event.defaultPrevented) buttonRef.value?.focus({ preventScroll: true })
       }
 
-      window.addEventListener('click', handler)
-      onUnmounted(() => window.removeEventListener('click', handler))
+      window.addEventListener('mousedown', handler)
+      onUnmounted(() => window.removeEventListener('mousedown', handler))
     })
 
     // @ts-expect-error Types of property 'dataRef' are incompatible.
diff --git a/packages/@headlessui-vue/src/components/menu/menu.ts b/packages/@headlessui-vue/src/components/menu/menu.ts
index 2472b8e09a..9eb615c73c 100644
--- a/packages/@headlessui-vue/src/components/menu/menu.ts
+++ b/packages/@headlessui-vue/src/components/menu/menu.ts
@@ -147,8 +147,8 @@ export const Menu = defineComponent({
         if (!event.defaultPrevented) buttonRef.value?.focus({ preventScroll: true })
       }
 
-      window.addEventListener('click', handler)
-      onUnmounted(() => window.removeEventListener('click', handler))
+      window.addEventListener('mousedown', handler)
+      onUnmounted(() => window.removeEventListener('mousedown', handler))
     })
 
     // @ts-expect-error Types of property 'dataRef' are incompatible.