[Spike] Investigate "[EuiBottomBar] Fixed position... #9242"
Per a discussion on 12/02/25 in our weekly team sync:
This appears to be a long-standing issue related to the EuiPortal component.
The severity of the issue is high, as it can crash the UI. However, the scope is unknown -- it is not clear how often this happens in Kibana.
The urgency is low, simply because a workaround does exist today to prevent this, which is to set usePortal={false}. However, it is likely that users are unaware of this issues and likely simply use the defauljt for EuiBottomBar, which is usePortal={true}.
We should do some analysis to determine a path forward:
- How often are users experiencing this bug in Kibana? Analyze the specific conditions under which it happens and compare current Kibana usage to identify problems.
- What is a short term solution -- can we simply update existing usage in Kibana to
usePortal={false}? Can we add additional guidance to prevent this? Can we simply remove portaling -- or is that a harder to fix? - (Stretch) Long term, consider what could be done about portaling generally in EUI, which is overused, unnecessary, and problematic.
I've spent some time digging into this since the same thing could be seen in managed flyouts when navigating from an overlay flyout to a pushed flyout.
- Interestingly, the issue does not happen in development mode and is unlikely to happen in Kibana due to them using Emotion's
speedy: truemode - The error in managed EuiFlyout is caused by EuiOverlayMask modifying styles injected to DOM by
@emotion/css. Removing these styles fixes the problem in that case. - EuiPortal needs refactoring in general. Its architecture is the source of this problem and forces consuming components to work around its flaws.
Considering how many areas an update to EuiPortal's logic may affect, I believe it's best if we start with fixes on the consuming EUI components level, specifically addressing the @emotion/css compatibility in EuiOverlayMask, and updating EuiBottomBar to not allow the broken prop combination.