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(
console.log(x)}> - Trigger + Trigger alice bob @@ -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( } }) - 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( 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(
- Trigger + Trigger alice bob @@ -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( 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( autoFocus, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, - onClick: handleClick, + onMouseDown: handleMouseDown, }, focusProps, hoverProps,