Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bolivierjr opened this issue Apr 11, 2022 · 0 comments · May be fixed by #3029
Open

Comments

@bolivierjr
Copy link
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant