Popper's containerElement doesn't work correctly/support full screen API

[NicholasBoll]

🐛 Bug Report

Since the introduction of the PopupStack, containerElement no longer works properly. The PopupStack works with only a single container (document.body) for coordinating popup stacking and z-indexes. Popper does render inside the containerElement, but all behaviors are based on document.body. This causes an issue with stack hooks like useCloseOnOutsideClick not detecting clicks inside the popup correctly.

A valid use-case is when using the Full Screen API. If the popup isn't a child of the full screen element, it will not be shown while in full screen mode. Full screen might be used for a video player.

To Reproduce

Set a containerElement in a Popper component and use useCloseOnOutsideClick. Inside clicks will not be detected correctly.

Link: https://codesandbox.io/s/color-picker-popup-custom-container-xvmmz
Steps:

• click color picker icon
• hold the mouse down on an item in the popup menu

Expected Behavior

The menu should not close

Actual Results

The menu closes. This prevents clicks from working properly in the menu.

Additional Notes

This will require changes to the PopupStack to allow for new popup stacks per container element. Popups still have to behave correctly relative to other items in the stack.

[divyanshu023]

More Reproduction steps:
If the containerElement is not the root, the Popper is never able to reposition the contents properly. The contents of Popper does render inside containerElement, but Popper does not position them properly. While inspecting the dom, i found a phantom dom element attached to document.body which Popper was trying to position

https://codesandbox.io/s/nifty-forest-i2ys3?file=/src/index.tsx