We are currently using the Popover component for our web app popovers and would like the ability to change the container of the underlying Portal. By default, the Reach Portal appends the children to the end of the body, which is great, but in fact we'd like to be able to append it to our root app container to prevent z-index like collisions with 3rd party applications (such as Intercom)
Desired Behavior
Add a container prop to the Popover (and thus Portal component) that follow the same api as the React Portal so the node the portal is mounted to can be configured
Suggested Solution
Add container/mountNode prop to PortalProps which then bubbles up to the PopoverProps so an element, besides the end of the body, can be used as the mount node.
Who does this impact? Who is this for?
Anyone who would want to customize the mount node
Describe alternatives you've considered
I've tried setting the z-index of our third party applications code but that has been difficult and will not scale.
I was thinking of looking at other popover libraries which expose the mount node but we're pretty heavily invested in reach/ui so I made an issue :)
Additional context
The image below shows our app with the portal open (the large left hand floating menu).
If you look at the DOM, the <reach-portal> is after the <div id="intercom-css-container" /> and thus sits on top of the intercom widget. And since we have an invisible button to close the panel that is open, it's sitting on top of the Intercom widget preventing our users from interacting with Intercom while a portal is open.
JakeSchroeder
commented
4 years ago
🚀 Feature request
Current Behavior
We are currently using the
Popovercomponent for our web app popovers and would like the ability to change the container of the underlyingPortal. By default, the Reach Portal appends the children to the end of the body, which is great, but in fact we'd like to be able to append it to our root app container to prevent z-index like collisions with 3rd party applications (such as Intercom)Desired Behavior
Add a
containerprop to thePopover(and thusPortalcomponent) that follow the same api as the React Portal so the node the portal is mounted to can be configuredSuggested Solution
Add
container/mountNodeprop toPortalPropswhich then bubbles up to thePopoverPropsso an element, besides the end of the body, can be used as the mount node.Who does this impact? Who is this for?
Anyone who would want to customize the mount node
Describe alternatives you've considered
Additional context
The image below shows our app with the portal open (the large left hand floating menu).
If you look at the DOM, the
<reach-portal>is after the<div id="intercom-css-container" />and thus sits on top of the intercom widget. And since we have an invisible button to close the panel that is open, it's sitting on top of the Intercom widget preventing our users from interacting with Intercom while a portal is open.