[Bug]: Interacting with third-party components that use portals inside a Dialog closes the Dialog

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.0.0

What browser are you using?

Firefox

Reproduction repository

https://codesandbox.io/s/pensive-fast-yxokp?file=/src/App.vue

Describe your issue

When any component inside a Dialog renders itself elsewhere in the DOM using a Portal/Teleport, clicking in it closes the entire Dialog. The example above uses vue-flatpickr-component to create a date picker inside a modal, but because it renders the actual flatpickr instance somewhere else in the DOM, clicking any date closes the entire modal.

The docs on this say:

When a Dialog is rendered, clicking the DialogOverlay will close the Dialog.

But that isn’t exactly the case—it’s not clicking the DialogOverlay specifically that closes the Dialog, but clicking anything that is not a child of the Dialog in the DOM.

I believe the relevant part of the code is here: https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-vue/src/components/dialog/dialog.ts#L174-L184

What do you think about adding a way to disable that global mousedown handler, or adding an option to actually only close the Dialog based on clicks directly on the DialogOverlay component?

[RobinMalfait]

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

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

You can already try it using:

• npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.
• npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

---

I’ve updated your CodeSandbox with the latest insiders build: https://codesandbox.io/s/sweet-tree-egth6u

[dcastil]

I opened a PR to fix the issue for the React-specific version in https://github.com/tailwindlabs/headlessui/pull/989. Not sure though whether this fix is also applicable in Vue since it relies on the event delegation system of React which also propagates events through portals.