Feature: add option to close dropdown on mousedown outside instead of full click

[agusterodin]

I have seen menu button dropdowns implemented both ways and understand that you want to enforce a consistent experience but would love a prop that allows us to close dropdown on mousedown instead of a full click (mouse down + mouse up) outside.

This style of behavior lends itself well to very "app-like" webapps. This is how dropdowns work at an os level or any native desktop app. I have seen this behavior in places on the web like the spotify web player and the app switcher menu at top right of gmail.

[RobinMalfait]

Hey! Thank you for your suggestion!
Much appreciated! 🙏

I think that an option to control it is not a good idea, I prefer consistency. That said, I think we might want to switch to just mouse down instead of a full click everywhere.
We made some decisions based on macOS behaviour (for example, Menu & Listbox options don't wrap around).
When I look at the native Menu on mac, or a native <select> html element, these also disappear on mouse down instead of a full click.
When you look at inputs, they also loose focus when you mouse down outside of the element.

@adamwathan what do you think of switching from a full click to just a mouse down for this outside click behaviour?

[adamwathan]

I like the idea to just straight up switch to mouse down. If Tim does it, we do it #macOS

[RobinMalfait]

TIM APPLE!

[RobinMalfait]

This will be available in the next release.

• You can already try it using npm install @headlessui/react@dev or yarn add @headlessui/react@dev.
• You can already try it using npm install @headlessui/vue@dev or yarn add @headlessui/vue@dev.