From 51acc1bff5284ed52e693c9d2df4b2c9f352f428 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 11 Apr 2025 00:00:39 +0200
Subject: [PATCH] Open `Menu` and `Listbox` on `mousedown` (#3689)

This is a small behavioral change, but this PR will change when the
`Menu` and `Listbox` components open.

This PR will now open the `Menu` and `Listbox` components on `mousedown`
instead of `click`. This will make it feel more responsive and faster to
the user.

This is also how macOS for example opens menu-like components on the OS
level. This is also how the native `<select>` (at least on macOS) works.
---
 packages/@headlessui-react/CHANGELOG.md                     | 1 +
 .../src/components/listbox/listbox.test.tsx                 | 6 +-----
 .../@headlessui-react/src/components/listbox/listbox.tsx    | 5 +++--
 .../@headlessui-react/src/components/menu/menu.test.tsx     | 6 +-----
 packages/@headlessui-react/src/components/menu/menu.tsx     | 5 +++--
 5 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 4db2126..152ea70 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Improve `Menu` component performance ([#3685](https://github.com/tailwindlabs/headlessui/pull/3685))
 - Improve `Listbox` component performance ([#3688](https://github.com/tailwindlabs/headlessui/pull/3688))
+- Open `Menu` and `Listbox` on `mousedown` ([#3689](https://github.com/tailwindlabs/headlessui/pull/3689))
 
 ## [2.2.1] - 2025-04-04
 
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx b/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
index f606fc9..6ddac4d 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
@@ -3963,11 +3963,10 @@ describe('Mouse interactions', () => {
   it(
     'should be possible to click outside of the listbox, on an element which is within a focusable element, which closes the listbox',
     suppressConsoleLogs(async () => {
-      let focusFn = jest.fn()
       render(
         <div>
           <Listbox value={undefined} onChange={(x) => console.log(x)}>
-            <Listbox.Button onFocus={focusFn}>Trigger</Listbox.Button>
+            <Listbox.Button>Trigger</Listbox.Button>
             <Listbox.Options>
               <Listbox.Option value="alice">alice</Listbox.Option>
               <Listbox.Option value="bob">bob</Listbox.Option>
@@ -3995,9 +3994,6 @@ describe('Mouse interactions', () => {
 
       // Ensure the outside button is focused
       assertActiveElement(document.getElementById('btn'))
-
-      // Ensure that the focus button only got focus once (first click)
-      expect(focusFn).toHaveBeenCalledTimes(1)
     })
   )
 
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
index c3a333a..eb885c2 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -393,7 +393,8 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     }
   })
 
-  let handleClick = useEvent((event: ReactMouseEvent) => {
+  let handleMouseDown = useEvent((event: ReactMouseEvent) => {
+    if (event.button !== 0) return // Only handle left clicks
     if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
     if (machine.state.listboxState === ListboxStates.Open) {
       flushSync(() => machine.actions.closeListbox())
@@ -450,7 +451,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
       onKeyDown: handleKeyDown,
       onKeyUp: handleKeyUp,
       onKeyPress: handleKeyPress,
-      onClick: handleClick,
+      onMouseDown: handleMouseDown,
     },
     focusProps,
     hoverProps,
diff --git a/packages/@headlessui-react/src/components/menu/menu.test.tsx b/packages/@headlessui-react/src/components/menu/menu.test.tsx
index a3ed4d2..fe994e6 100644
--- a/packages/@headlessui-react/src/components/menu/menu.test.tsx
+++ b/packages/@headlessui-react/src/components/menu/menu.test.tsx
@@ -3077,11 +3077,10 @@ describe('Mouse interactions', () => {
   it(
     'should be possible to click outside of the menu, on an element which is within a focusable element, which closes the menu',
     suppressConsoleLogs(async () => {
-      let focusFn = jest.fn()
       render(
         <div>
           <Menu>
-            <Menu.Button onFocus={focusFn}>Trigger</Menu.Button>
+            <Menu.Button>Trigger</Menu.Button>
             <Menu.Items>
               <Menu.Item as="a">alice</Menu.Item>
               <Menu.Item as="a">bob</Menu.Item>
@@ -3109,9 +3108,6 @@ describe('Mouse interactions', () => {
 
       // Ensure the outside button is focused
       assertActiveElement(document.getElementById('btn'))
-
-      // Ensure that the focus button only got focus once (first click)
-      expect(focusFn).toHaveBeenCalledTimes(1)
     })
   )
 
diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
index 7dc7782..56ba2f4 100644
--- a/packages/@headlessui-react/src/components/menu/menu.tsx
+++ b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -229,7 +229,8 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     state.itemsElement,
   ])
 
-  let handleClick = useEvent((event: ReactMouseEvent) => {
+  let handleMouseDown = useEvent((event: ReactMouseEvent) => {
+    if (event.button !== 0) return // Only handle left clicks
     if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
     if (disabled) return
     if (menuState === MenuState.Open) {
@@ -273,7 +274,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
       autoFocus,
       onKeyDown: handleKeyDown,
       onKeyUp: handleKeyUp,
-      onClick: handleClick,
+      onMouseDown: handleMouseDown,
     },
     focusProps,
     hoverProps,