Fix useOutsideClick swallowing events inside ShadowDOM

[mello-r]

In our Project, we are heavily using web components for a Microfrontend Architecture. For our React Components, we are using tailwindcss and headlessui. After implementing ListBox and ComboBox Components, we quickly hit #874. I dug a little bit in to the code and it seems that the useOutsideClick hook swallows the ShadowDOM events.

For Example, a ListBox is inside an ShadowDOM and the user clicks on an ListBox item. The useOutsideClick hook gets the mousedown event. In this case, event.target is the ShadowDOM it selfe and not the ListBox item. So the code sets the initialClickTarget to the ShadowDOM and the following useOutsideClick Logic registered the event as an outside click instead of a click on the ListBox item. The fix, which works in our Project, is to give the real target inside the ShadowDOM, with composePath if it exists.

In #874 there was stated that there will properly be some clean up, regarding web components, so I decided to share this fix because it is not too big and doesn't let any test fail. Feel free to close the PR if there are other colliding plans.

[vercel]

Someone is attempting to deploy a commit to the Tailwind Labs Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

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

Name	Status	Preview	Updated
headlessui-react	✅ Ready (Inspect)	Visit Preview	Sep 27, 2022 at 3:09PM (UTC)

[RobinMalfait]

Hey! Thank you for your PR!
Much appreciated! 🙏

We don't have proper Shadow DOM support right now, but this PR seems small enough (and maintainable enough) to support this use case if this solves your problems.

I opened a rebased version of your PR (#1886) where I also kept you as the original author of the commit but I just rebased it.

Thanks for your PR!

[dickfickling]

@mello-r this PR saved me hours of troubleshooting, thank you!

Are you using Popovers in your project by any chance? This PR fixes the behavior where all clicks are treated as outside clicks, but now any click inside my shadow dom doesn't close the popover. Haven't confirmed if this also happens on ListBoxes.

[mello-r]

@dickfickling glad it helped someone! If you look into the PR, there is not really much changed. Only how the target is calculated with composePath. So the problem you described should not appear. If you can give a minimal reproduction Repo, I could look into it. Currently, in our Project we are not using any Popover.

[mello-r]

@dickfickling you are right. I just tested it on a minimal reproducible Repo and it seems not to work if the ShadowDOM has more than only the Popover. Maybe this line if (!target.ownerDocument.documentElement.contains(target)) return is the problem. The line gets the target from inside the ShadowDOM, but checks from outside. Maybe with target.getRootNode().contains(target) instead of target.ownerDocument.documentElement.contains(target) it would work. This is only speculation, but maybe this helps

[dickfickling]

wow, thanks for looking into it. I'll dig in a bit today and see what I can find.

[theomessin]

@mello-r @dickfickling I'm having this issue (not being able to close when clicking inside the ShadowDOM) as well. Any update on this?

[dickfickling]

I didn't spend much time trying to figure it out - decided to just create my own custom popover

[theomessin]

@mello-r Your proposed solution works so I opened a pull request #1913