Skip to content

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

Open
@bolivierjr

Description

@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>:

Screen Shot 2022-04-11 at 12 35 18 PM

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions