React-datepicker: withPortal is not a true React Portal, and setting it ignores popperContainer

[jeffcstock]

Setting withPortal to true doesn't work how you expect, because it still renders inside the component hierarchy. ie. it's not a "true" portal outside the DOM structure.

Example: On mobile, the withPortal prop doesn't append the calendar to the DOM, so it's not a "true" portal:

I've tried to fix this by forcing the calendar to be appended to the DOM, so I've provided a wrapper for the calendar to get ported to a div outside the body (see https://github.com/Hacker0x01/react-datepicker/pull/1074) and https://github.com/Hacker0x01/react-datepicker/pull/1074#issuecomment-428957422).

However, when withPortal is set to true, it ignores any popperContainer you have provided.
This is a problem because it can be affected by other elements that naturally appear first in the CSS stacking context:

Does anybody know of a way that we can use "withPortal" and still have a popper Container provided?

Expected behavior

Setting withPortal to true will not ignore the popperContainer that you have set

Actual behavior

Setting withPortal to true ignores the popperContainer that you have set

Steps to reproduce

1. Create a Datepicker with a popperContainer set to append the calendar to the dom (see https://github.com/Hacker0x01/react-datepicker/pull/1074#issuecomment-428957422).
2. set withPortal to true.

Observe that it will not append the calendar to the DOM anymore.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.