eui icon indicating copy to clipboard operation
eui copied to clipboard

[Spike] Investigate "[EuiBottomBar] Fixed position... #9242"

Open JasonStoltz opened this issue 3 weeks ago • 1 comments

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.

JasonStoltz avatar Dec 02 '25 21:12 JasonStoltz

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: true mode
  • 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.

tkajtoch avatar Dec 04 '25 13:12 tkajtoch