Repository navigation
Ability to style the Popover overlay #5231
Description
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
Activity
reidbarber commentedon Oct 18, 2023
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 commentedon Dec 1, 2023
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:
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 commentedon Dec 2, 2023
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 commentedon Dec 4, 2023
@devongovett That would be ideal!
levrik commentedon Sep 20, 2024
This is really needed as otherwise Popovers (Menus in our case) inside a Modal Dialog don't overlay the Modal Dialog which uses
z-indexas written in code examples from the documentation.As a workaround I apply styles to
[data-testid="underlay"]for now but TBH this feels hacky.xamgore commentedon Dec 13, 2025
That would also be helpful for our own context menu implementations. There are a few things to consider:
underlaywithout the[data-testid="underlay"]hackContext menus are common among desktop users in professional software such as Linear. From an accessibility perspective, couldn't long-presses help here?