Open imagoiq opened 1 month ago
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!
Not happening on Mac/Firefox 125.0.1, happens on Windows/Firefox 115 and Windows/Firefox 124 (Developer Edition).
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