trigger "outside click" behaviour on mousedown (#212)

Fixes: #95

Author: RobinMalfait

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>(

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])

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.

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.