Ability to style the Popover overlay

[deebov]

Provide a general summary of the feature here

Would be very useful to style the Popover overlay the same way as Modal and ModalOverlay.

🤔 Expected Behavior?

You should not be able to interact with outside elements while the popover is open.

😯 Current Behavior

If there are elements with zIndex set, you're able to click them while the popover is still open. That's due to the Popover Overlay not having any zIndex which makes it possible to click other elements with zIndex.

💁 Possible Solution

Either the popover overlay already comes with zIndex or an ability to customize the overlay.

🔦 Context

We have clickable elements with higher zIndex and if you try to close the popover by clicking outside, you can accidentally interact with an element with higher zIndex than the overlay.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

Related to discussion in #5126. This would be nice to have, and since it's non-breaking it doesn't need to be added before RAC GA.

[Talor-A]

hi @reidbarber , this is a niche blocker for us as well. we have an electron app we use the popovers in, and the overlays need this special style rule applied:

 -webkit-app-region: no-drag;

otherwise, window titlebars eat click events and prevent modals from being closed.

all we need is some way to target the underlay with styles, either by className, rendering a <Overlay /> element that replaces the built in one, or some other method as a workaround.

[devongovett]

I think we could add an API similar to <ModalOverlay>, but for popovers. By default, <Popover> would include the overlay, but if you want to customize it, you could wrap it in a <PopoverOverlay>.

[deebov]

@devongovett That would be ideal!

[levrik]

This is really needed as otherwise Popovers (Menus in our case) inside a Modal Dialog don't overlay the Modal Dialog which uses z-index as written in code examples from the documentation.

As a workaround I apply styles to [data-testid="underlay"] for now but TBH this feels hacky.