Controlled popover does not close properly in Safari

[atmelmicro]

In Safari (both macOS and iOS) the controlled popover is not closing properly. When trying to close the popover by clicking on blank space, the popover doesn't close. Only then it closes on hover.

[atmelmicro]

Until the Anchor API gets major browser support ( https://caniuse.com/css-anchor-positioning ), there is no good way to position a native HTML popover without JavaScript. The current implementation does not work in Safari and the content inside the popover is not selectable. It closes on click. I can think of 2 solutions for this. Either polyfill the anchor API ( https://github.com/oddbird/css-anchor-positioning ). Or use a library like Floating UI to position the popover in the top layer to the place it should be ( https://hidde.blog/positioning-anchored-popovers/ ). If we go the Floating UI route, should the popover provide some prop interface for the user to plug their own library to control it or should a library like Floating UI be installed and it all handled within RUI? @adamkudrna

[atmelmicro]

I think this issue was solved in this webkit commit.

https://github.com/WebKit/WebKit/commit/0db60d2b4123e101f8d16f925634f6226f7daaae

It is not currently in the Safari technology preview, but it is a webkit issue, not a react ui issue.

A new version of safari technology preview should release today. I will test it after it releases and close this issue.

[atmelmicro]

Unfortunately only changes made until April 19th have made it into the Safari Technology Preview. The next release will be in 2 weeks.

[atmelmicro]

This is fixed in Safari Technology Preview 219. iOS 18.5 and macOS 15.5 also released, but they do not contain the fix.

[atmelmicro]

This has been fixed in iOS 18.6.