useOutsideClick interoperability with libraries that use event.preventDefault

[benjaminleonard]

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?
v1.7.15

What browser are you using?
Arc

Reproduction URL
https://643kmk-5173.csb.app/

Describe your issue
Try clicking on the listbox to open it, and whilst it is open click on the dropdown menu. See that both are now open simultaneously.

When combined with some other libraries the useOutsideClick hook fails to register and a dropdown does not close.
This happens with both radix and react-aria (which we're using for the dropdown and the datepicker). The issue I believe is that the libraries are doing an event.preventDefault on mouseDown so they can manage focus but the pointer event is never heard by useOutsideClick. See related issue: radix-ui/primitives#1903

I have a version working locally by swapping the mouseDown listener for a pointerDown one. I'm aware this is a bit of a grey area since it's an interaction with another library. Perhaps we can check for both? Or allow the user to specify? I'm unsure about the implications of listening for pointerDown instead.

[RobinMalfait]

Hey, thank you for this bug report! 🙏

We were already trying to bypass event.preventDefault() by using the capturing phase of the events instead of the bubbling phase but apparently that was not enough. We can't just rely on pointerdown instead of mousedown because pointerdown won't work on older mobile devices, but we can use both to try and capture the target element.

While testing on mobile (iPad) with your reproduction, I also noticed that the click event itself was also cancelled. To solve this, we also added a touchend event to handle those edge cases as well.

This should be fixed by #2572, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.

P.S.: Congratulations on shipping the first Oxide rack! (https://twitter.com/oxidecomputer/status/1674901883130114048)

[benjaminleonard]

Amazing! Thanks you for the prompt fix — just tested and does indeed work.

Kind of you to say also, we're presently using the select in the web console. Looking forward to using a few more components shortly.