Skip to content

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

@bolivierjr

Description

@bolivierjr
Contributor

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>

Activity

carolz19

carolz19 commented on Apr 9, 2025

@carolz19

Hi @bolivierjr! I was wondering if there was a reason the linked pull request was never merged in? Our team is currently running into this issue with the Popover component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @bolivierjr@carolz19

      Issue actions

        Multiple layers of overflowBoundaryElement on popover/dropdown components does not work correctly · Issue #3028 · salesforce/design-system-react