Outside click detection doesn't work on web component with shadow-roots even when it is placed inside Dialog.Panel

[dorji-tshering]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

^1.7.4

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/s/react-playground-forked-zms8o5?file=/index.js

Describe your issue

I am using an emoji library called emoji-mart with the Dialog component. If you visit the link and click the open button, the emoji picker is popped up which is a children of Dialog.Panel from headless UI. I didn't expect the Dialog to call its onClose callback when I click on the emojis or anywhere inside the emoji picker for that matter. I don't know how the callback is fired since it is inside the Dialog.Panel. I tried to work around with the event handlers but to no avail.

[thecrypticace]

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

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

You can already try it using:

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