[popover] Popover becomes unanchored when trigger is invisible

[ryanleichty]

Bug report

Current behavior

When a popover trigger becomes invisible (via display: none or anything else that would return false via triggerElement.checkVisibility()), the popover becomes unanchored.

Expected behavior

I would expect the popover to close.

Reproducible example

https://base-ui.com/react/components/popover

Open the popover, set the button display property to none (in the browser)

Base UI version

Tested in the browser in the docs

Which browser are you using?

Chrome

Which OS are you using?

Mac OS

Which assistive tech are you using (if applicable)?

None

Additional context

I'm actually implementing a popover in a non-React context and was trying to follow a similar pattern as Base UI (also using Floating UI under the hood) and ran into the same issue where I was hiding the popover trigger on desktop, causing the popover to become unanchored. I recently stumbled upon checkVisibility() and used it to solve the problem by running it in the autoUpdate function from Floating UI.

I was mainly curious to see how you might've handled this scenario.

[mj12albert]

I recently stumbled upon checkVisibility()

Ohh I did not know about this 👀 maybe it could be used for https://github.com/mui/base-ui/pull/1907 as well @atomiks

[atomiks]

Currently, data-anchor-hidden only checks clipping but this check (checkVisibility) could be added for that attribute for the display: none case. That would allow you to hide the popup when the anchor is hidden in this scenario

[ryanleichty]

Support isn't the greatest in Safari since it's fairly new (Safari 17.4) so I created a basic polyfill to be on the safe side. Otherwise, it's fairly helpful

[piyushzala158]

Raised a PR for above issue: https://github.com/mui/base-ui/pull/2166