Multiple layers of overflowBoundaryElement on popover/dropdown components does not work correctly

[bolivierjr]

At a high level, this library uses ReactDOM.unstable_renderSubtreeIntoContainer instead of the full featured React Portal feature. This can result in context not flowing through to items which are portaled, this is documented here: facebook/react#16721 . This can result in a bug in the library when context is being used, namely for the PortalSettings and IconSettings.

Diving into the details, when having overflowBoundaryElement set on multiple components, multiple layers deep, the React context for the PortalSettings renderTo prop does not carry through the use of ReactDOM.unstable_renderSubtreeIntoContainer and loses it’s value. This is what it ends up looking like because it loses the context value and falls back to attaching to the body element instead of the proper portal destination that you provide it through PortalSettings. e.g. <PortalSettings renderTo=”#portal-destination>:

Steps to reproduce:

• Add a Popover component around a button, and have the a prop for Popover set to position=”overflowBoundaryElement”
• Add a Datepicker component to the body prop of the Popover component and have a Datepicker prop set to menuPosition=”overflowBoundaryElement”
• Open the popover, then try to open the datepicker to view calender.

E.g.

   <Popover
     body={<Datepicker menuPosition="overflowBoundaryElement" />}
     position="overflowBoundaryElement"
   >
     {children}
   </Popover>