elastic / elastic/eui

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

Open
#9,242 3 comments 0 reactions 0 assignees View on GitHub
stale-issue
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

## 📓 Summary

When using the `EuiBottomBar`component, 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:

Image

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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.