Any interaction closes popover on Firefox

[imagoiq]

When clicking or selecting text inside a popover, it closes immediately. Only on Firefox.

https://design-system.post.ch/?path=/docs/9a636763-de2d-4f72-bc81-98daf10871f7--docs

[imagoiq]

I had a look, but I cannot figure a fix or even a workaround.

The issue is inside the lightDismissOpenPopovers function in the popover-helper.ts file of the polyfill.

The function looks for an ancestor, but there is no ancestor when we click on the <p> for example. And when there is no ancestor, as you can see in this screenshot, all popovers are hidden (with hideAllPopoversUntil.

The popover is actually hidden inside the shadow DOM and even if we place the popover interactivity on the host of the post-popovercontainer, the slotted content is inside the post-popover element and the first parentElement (used in nearestInclusiveOpenPopover function) of any slotted node will be post-popover.

So in my opinion, I think we should:

Remove the nested web component container and put the popover interactivity on post-popover. It should as well avoid us using cross-root id which doesn't seem to work very well with the Popover API at the moment (see https://stackoverflow.com/questions/77324143/popovertargetelement-does-not-cross-shadow-boundaries from Philipp, trigger.popoverTargetElement = popover; is not working on Chrome at the moment for some reason. You can see it as well in the polyfill demo where the demo "Click to toggle shadowed Popover (cross-tree)" doesn't work in chrome: https://popover-polyfill.netlify.app/), and also simplify the component as the polyfill if used normally should be able to handle the aria-expanded attribute.

A second review and opinion would be nice!

[gfellerph]

Not happening on Mac/Firefox 125.0.1, happens on Windows/Firefox 115 and Windows/Firefox 124 (Developer Edition).