[EuiBottomBar] Fixed position shouldn't mount into a portal by default

[tonyghiani]

📓 Summary

When using the EuiBottomBarcomponent, when position="sticky", the bottom bar is mounted as a normal React node, and it works correctly.

When position is not specified, the default value is fixed.
This would work perfectly fine if it were only applying changes to the CSS layout, as the fixed position doesn't affect the DOM node position.

However, there is an issue here. When position="fixed" (explicitly or by default) the usePortal property starts playing a role. As this is truthy by default, it implicitly applies the behaviour of creating the bar inside a portal, appending the new DOM node at the end of the body tag.

Sometimes, this results in the following error, which crashes the page with an unhandled error:

To prevent this behavior and purely rely on the CSS positioning, usePortal must be explicitly set to false. This guarantees the expected behaviour for the EuiBottomBar component on a fixed positioning.

This implicit behaviour seems dangerous and could lead to unexpected crashes. I wonder if the portal usage should be off by default and if we actually need it to even be there for some reason.

[tonyghiani]

On a side note, we have a use case in Kibana where the affordForDisplacement solution would work great, but it's only supported with the portal option enabled. Please keep this requirement in mind when looking into this issue, thanks in advance!