Skip to content

Open Menu and Listbox on mousedown #3689

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Apr 10, 2025
Merged

Open Menu and Listbox on mousedown #3689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f4bb84
remove part of the test
RobinMalfait Apr 10, 2025
073e35b
use `mousedown` instead of `click`
RobinMalfait Apr 10, 2025
f223132
ensure we only allow "left click"
RobinMalfait Apr 10, 2025
9136265
update changelog
RobinMalfait Apr 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/@headlessui-react/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
6 changes: 1 addition & 5 deletions packages/@headlessui-react/src/components/listbox/listbox.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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)
})
)

Expand Down
5 changes: 3 additions & 2 deletions packages/@headlessui-react/src/components/listbox/listbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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())
Expand Down Expand Up @@ -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,
Expand Down
6 changes: 1 addition & 5 deletions packages/@headlessui-react/src/components/menu/menu.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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)
})
)

Expand Down
5 changes: 3 additions & 2 deletions packages/@headlessui-react/src/components/menu/menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -273,7 +274,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
autoFocus,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp,
onClick: handleClick,
onMouseDown: handleMouseDown,
},
focusProps,
hoverProps,
Expand Down