[React] Dialog closes when I release the mouse click outside of the dialog

[carlwood]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.5

What browser are you using?

Chrome, Safari

Reproduction URL

https://headlessui.com/react/dialog

Describe your issue

When I start selecting text and dragging my cursor (left click down) inside the dialog but then I release it (left click up) outside the dialog, the dialog closes. I expect the dialog to stay open because I didn't left-click (or tap) outside the modal. See video below

headless-ui-dialog-drag-close.mov

[agusterodin]

I thought I was going crazy when I recently started noticing this. This is definitely new, unintended behavior.

It is also present on the Popover component.

[thecrypticace]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This has been fixed by #1667, and will be available in the next release.

You can try it by using our insiders build:

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

[Voyager-Two]

This is a pretty serious bug, when will the next release be?
Is only option to use potentially unstable insiders version for the time being?

A work-around is to manage the closing yourself; when click on outside (backdrop), and pressing ESC key.

[Aravinda93]

@carlwood @Voyager-Two

I am facing similar issue when I access DialogPanel2.vue via DialogPanel1.vue then it for some reason automatically closes the DialogPanel1.vue.

Issue recreation: Codesandbox
Issue posting: #3199

Can you please once have a look and provide some suggestions or workarounds?