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.

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

Conversation

RobinMalfait
Copy link
Member

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.

When using a normal `click`, the flow goes like this:
1. mousedown
2. focus
3. mouseup
4. click

But now that we use `mousedown` with an `event.preventDefault()`, we
will also cancel the `focus` event and therefore the `onFocus` won't
fire at all.
Copy link

vercel bot commented Apr 10, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 10, 2025 9:40pm
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 10, 2025 9:40pm

A normal `click` handles that for you, but a mousedown does not. Let's
only allow a normal left click only.
@RobinMalfait RobinMalfait merged commit 51acc1b into main Apr 10, 2025
8 checks passed
@RobinMalfait RobinMalfait deleted the change/trigger-elements-on-mousedown branch April 10, 2025 22:00
@mrcoles
Copy link

mrcoles commented Apr 29, 2025

This caused a bug in my UI—I’m reverting my project to use 2.2.1 in the meantime. I started a discussion here: #3714

@Baztoune
Copy link

Baztoune commented May 6, 2025

To whom it may concern :
This change broke some of our tests, as we're using testing-library, which doesn't trigger mousedown on click. The solution was simple : use their companion library, user-event, to simulate user interactions instead of firing dom events.

@peinguin
Copy link

It makes so bad. When user tries to scroll on mobile devices.
It breaks UX. And should not be a minor change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants