[Bug]: Popover not working inside Web Component

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.2.0

What browser are you using?

Chrome

Reproduction repository

None

Describe your issue

When using popover inside a web component, the popover panel closes even when you click inside the panel. I am using the most minimal example of the docs. When I pull this code outside my web component into my “root” react application, it works as expected.

Used code:

const Example: React.FC<{}> = () => {
    return (
        <Popover className="relative">
            <Popover.Button>Solutions</Popover.Button>

            <Popover.Panel className="absolute z-10">
                <div className="grid grid-cols-2">
                    <a href="/analytics">Analytics</a>
                    <a href="/engagement">Engagement</a>
                    <a href="/security">Security</a>
                    <a href="/integrations">Integrations</a>
                </div>

                <img src="/solutions.jpg" alt="" />
            </Popover.Panel>
        </Popover>
    );
};

When using this code inside my web component, clicking inside the panel will close the popover.

[JaapWeijland]

Update: I did some digging and I think the problem is with this line:

https://github.com/tailwindlabs/headlessui/blob/a8bbd0ecee2ac608a6c64e7fce8c1b551444b63d/packages/%40headlessui-react/src/components/popover/popover.tsx#L181

This line only checks what the active element is within the “root tree”, but if the active element is inside a shadow tree, the whole custom element will be returned as the active element, and since that element does not live inside the popover panel, it concludes somewhere outside the panel is clicked on.

The following article helped me in understanding this: https://dev.to/open-wc/mind-the-document-activeelement-2o9a

Update #2: It could also be related to the way the target of the mousedown is determined:

https://github.com/tailwindlabs/headlessui/blob/a8bbd0ecee2ac608a6c64e7fce8c1b551444b63d/packages/%40headlessui-react/src/components/popover/popover.tsx#L203

Now, event.target is used as target, returning my whole webcomponent as the target. When using event.path[0] as target instead, the actual element within my web component is returned. Changing this could fix this issue with web components with a ‘open’ shadow root.

[herodrigues]

I can confirm that. I’m trying to use a modal in a browser extension that is rendered to a shadow root element.

The modal is rendered on document root instead of shadow root.