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

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

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.

I can confirm the issue. I use dialog with scrollable content that contains a selectbox. The selectbox options list is rendered at body level in a teleport and positioned with popper. Clicking on the options list will close the dialog.

same bug. What’s taking so long?

With React just add this it worked for me: <Dialog as="div" static onClose={() => null} className="fixed z-50 inset-0 overflow-y-auto modal">

This could work. The issue is now with other way to close the dialog.

The quick solution would be to remove the @close handler on the Dialog component and adding @click handler on the DialogOverlay to emit the close event.

You still need to handle other way of closing the dialog, like pressing the Escape key.

I don’t know if there are other things I am missing, here is an example.

<Dialog as="div" [...] @keydown.esc="$emit('close')" static>
  <DialogOverlay [...] @click="$emit('close')" />
</Dialog>

is there a workaround for this? seeing the same issue with @headlessui/react@1.2.0

After testing the solution I have proposed, there are still issues with flatpickr. Somehow, the year input is not focusable when it is inside the Dialog component.

Hey there! 👋🏻

Small bump of the issue.

Any news about the fix?

i have the same issue. when i use some element over the dialog and click the element, dialog will be close

What is the fix/solution or status of this? I would really like to use headless UI for dialogs and other things but cannot if it breaks my existing usage of third party libraries such as flatpickr.

I am using CKeditor BalloonEditor the Modal also close after clicking editor toolbar. Plz fix soon. Thank you.

I have the same issue as described, clicking on the calendar provided by devextreme closes the Dialog. is there a workaround for this?

I have the same issue as described, clicking on the calendar provided by flatpickr closes the Dialog.