trigger "outside click" behaviour on mousedown

Fixes: #95
tailwindlabs · Jan 29, 2021 · ab75bc6 · ab75bc6
1 parent 80402e7
commit ab75bc6
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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.