adobe
Ability to style the Popover overlay
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
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.
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.
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>.
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.
