Adjust outside click handling

[thecrypticace]

Right now we use the click event for "outside" clicks to close the dialog. However, this is a problem in two situations:

1. If a user opens a dialog during the mousedown or mouseup events the dialog will end up closing because the dialog will get mounted in the DOM before the click event is delivered. This causes it to see the click event as an outside click and fires its close event.
2. If you started a click inside the dialog (e.g. when selecting text) and it ended outside the dialog the click event is delivered outside which we saw as an outside click when it shouldn't be considered as such.

We can fix both of these with a small tweak to useOutsideClick:

• Record the element that's clicked in the mousedown capture phase
• If we don't have a recorded element then that means that a dialog was opened in a mousedown/mouseup event and we don't want to consider that event for outside click testing.
• Otherwise we test the recorded element instead of the click event's target for container inclusion to determine if it is or is not an outside click

Fixes #1646
Fixes #1647
Fixes #1657

[vercel]

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

Name	Status	Preview	Updated
headlessui-react	✅ Ready (Inspect)	Visit Preview	Jul 14, 2022 at 6:17PM (UTC)
headlessui-vue	✅ Ready (Inspect)	Visit Preview	Jul 14, 2022 at 6:17PM (UTC)