[EuiCodeBlock] Re-renders cause blank lines to appear when using `isVirtualized` if scrolled

[dennis-tismenko]

Describe the bug When using EuiCodeBlock with isVirtualized: true and overflowHeight: 100%, if the component is re-rendered while the user has scrolled down in the code block, blank lines will appear between the top of the code block and the line the user was scrolled to. I'm not sure if this bug is specific to usage in a EuiFlyout.

Impact and severity Low impact and severity. Known workaround: force a re-mount of the component by changing its key prop or set isVirtualized: false.

Environment and versions

Minimum reproducible sandbox https://codesandbox.io/p/devbox/euicodeblock-virtualized-within-euiflyout-height-100-forked-6j2tlc?workspaceId=ws_PBRiDLztB2gZ9hEEoiqpdS

To Reproduce

Steps to reproduce the behavior:

1. Click on "Show flyout example"
2. Click on "Submit"
3. Scroll down anywhere in the EuiCodeBlock
4. Click on "Submit"
5. See blank lines appear between top of code block and previous scrolled position. Will disappear if code block is scrolled.

Expected behavior No blank lines appear (same behaviour as isVirtualized: false)

Screenshots (Optional)

Additional context (Optional)

Nice to haves: EuiCodeBlock supports a ref prop, as programatically scrolling to the top of the block could be another workaround

[tkajtoch]

A fix could be to scroll to the top of the container when content changes

[tkajtoch]

Let's time-box the investigation effort to two workdays.

[JasonStoltz]

Thank you for adding this issue. We've triaged it to determine priority and next steps:

• New status: Backlog
• Prioritization: We have prioritized this work and plan to address it in the near term, but do not yet have a timeline.
• Next Steps: We’ll keep this issue updated as work progresses. The work was defined as a 2-day time-boxed investigation to determine the complexity of a proper fix.

If you believe this should be prioritized differently, please feel free to add more context here (e.g., how it impacts your work, or how broadly it might affect other users). That helps us re-evaluate priorities.

Notes from our Triage session:

@weronikaolejniczak confirmed she had validated the bug. It occurs in a very specific composition: within a flyout where a "submit" action changes the code block's content while the user is scrolled down.

The team noted that Kibana has a workaround for this: they force a re-render using a React key and then programmatically scroll the container back to the top.

The core of the problem is likely within the virtualization library itself, which doesn't handle dynamic content changes well. The team felt that simply adding a "scroll to top" fix in EUI would be a patch, and the ideal solution would be to fix the underlying virtualization behavior.

They concluded that this could either be a very simple fix or a "nightmare" that might require replacing the virtualization library entirely.

[sravanth-space]

Hi, I'm experiencing a similar issue after upgrading from EUI v99 to v107.

Previously, I used useResizeObserver to track the container height and pass it to overflowHeight, which worked fine in v99. After upgrading to v107, the virtualized EuiCodeBlock goes blank when content updates while the user is scrolled down. The scrollbar also resets to the top position, and the content only reappears when the scrollbar is moved.

This is problematic for my use case as build logs can contain thousands of lines and update frequently, so disabling virtualization isn't a viable option.

Any updates on the investigation or recommended workarounds?

[sravanth-space]

Hi, I'm experiencing a similar issue after upgrading from EUI v99 to v107.

Previously, I used useResizeObserver to track the container height and pass it to overflowHeight, which worked fine in v99. After upgrading to v107, the virtualized EuiCodeBlock goes blank when content updates while the user is scrolled down. The scrollbar also resets to the top position, and the content only reappears when the scrollbar is moved.

This is problematic for my use case as build logs can contain thousands of lines and update frequently, so disabling virtualization isn't a viable option.

Any updates on the investigation or recommended workarounds?

FYI, I’ve worked on resolving this bug in PR #9196. Would love your feedback!