fix(EuiCodeBlock): fixes re-renders causing blank lines to appear when using isVirtualized if scrolled #9196

sravanth-space · 2025-11-09T11:03:41Z

Summary

Fixes blank rendering in virtualized CodeBlock when scrolled ([EuiCodeBlock] Re-renders cause blank lines to appear when using isVirtualized if scrolled #9034)
Moves accessibility label from VirtualizedOuterElement to VirtualizedInnerElement
Preserves accessibility while preventing react-window calculation issues

Partially reverts the implementation approach from PR #8887 while maintaining the accessibility improvements.

Why are we making this change?

Problem:
After PR #8887, the accessibility label was injected inside the <pre> element managed by react-window's virtualization as part of the VirtualizedOuterElement. This caused react-window to miscalculate scroll offsets, resulting in blank lines appearing when:

User scrolls down in a virtualized code block
Content is updated (e.g., build logs appending new lines)
The component re-renders

Root Cause:
react-window's FixedSizeList requires the outer element to be "pure" - any injected content disrupts its internal measurements and scroll position calculations.

Solution:

Move the accessibility label from VirtualizedOuterElement to VirtualizedInnerElement to ensure a stable container for the virtualized calculations
- the label remains a child of the pre element and hence is read as label when the code element is focused
- This ensures the outer virtualized container stays clean for proper scroll calculations while maintaining accessibility

Screenshots #

before	after

Its best to use the sandbox mentioned in the issue https://codesandbox.io/p/devbox/euicodeblock-virtualized-within-euiflyout-height-100-forked-6j2tlc?workspaceId=ws_PBRiDLztB2gZ9hEEoiqpdS and change it with this pr patch.

Impact to users

Fixes a bug where virtualized code blocks would show blank lines when scrolled or when content updates. No breaking changes.

🟢 There are no updates required on consumers side.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

Browser QA
- Checked for accessibility including keyboard-only and screenreader modes
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately

cla-checker-service · 2025-11-09T11:03:46Z

💚 CLA has been signed

github-actions · 2025-11-09T11:03:54Z

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

mgadewoll

@sravanth-space Thanks for digging into this bug! It's awesome that you found the root cause for the issue 🎉
There are some adjustments we'll need to make here to ensure the component remains accessible.

mgadewoll · 2025-11-13T12:49:52Z

packages/eui/src/components/code/code_block_virtualized.tsx

+    );
+
+  // Render the accessibility label outside the virtualized container
+  // This preserves accessibility while fixing virtualization bugs


This preserves accessibility while fixing virtualization bugs

This is unfortunately not true.
While the element is in the DOM and navigable by screen reader browse mode, moving the label out of the pre breaks accessibility when focusing the element as the label now is not read.

ℹ️ Why was it added as child in the first place?
The main limitation here is that pre does not support aria-label or aria-labelledby, so we can't keep the label outside of the element. To ensure its read out together it has to be content of the focusable element.

expected (production state) unexpected (current PR state)

Screen.Recording.2025-11-13.at.13.45.17.mov

Screen.Recording.2025-11-13.at.13.44.38.mov

packages/eui/src/components/code/code_block_virtualized.tsx

packages/eui/src/components/code/code_block.tsx

sravanth-space · 2025-11-13T13:29:53Z

@sravanth-space Thanks for digging into this bug! It's awesome that you found the root cause for the issue 🎉 There are some adjustments we'll need to make here to ensure the component remains accessible.

Thanks so much for the thorough review and for catching the accessibility issues! 🙏
I've pushed the changes to address all your feedback.

packages/eui/src/components/code/code_block_virtualized.tsx

packages/eui/changelogs/upcoming/9196.md

mgadewoll · 2025-11-13T15:29:19Z

@sravanth-space Please be so kind to also update the PR description according to the final updates 🙏

mgadewoll · 2025-11-13T17:29:57Z

@sravanth-space I added a VRT-only story as regression test for this bug, I hope you don't mind me pushing it directly.

sravanth-space · 2025-11-13T20:01:49Z

@sravanth-space I added a VRT-only story as regression test for this bug, I hope you don't mind me pushing it directly.

Thanks. I have updated the PR description and for the jest and cypress tests I haven't added/updated please let me know if I need to add/update any.

mgadewoll

🟢 The changes are LGTM and the fix works correctly. Awesome work!
Thanks for contributing! 🎉

mgadewoll · 2025-11-14T10:08:10Z

buildkite test this

- Fixes blank rendering in virtualized CodeBlock when scrolled (elastic#9034) - Moves labels outside <pre> in both virtualized and regular variants - Preserves accessibility while preventing react-window calculation issues - Ensures consistent architecture across all CodeBlock rendering modes Partially reverts the implementation approach from PR elastic#8887 while maintaining the accessibility improvements.

renamed with the PR number instead of issue number.

…ibility Addresses review feedback by placing the label in VirtualizedInnerElement instead of outside the <pre> tag, preserving screen reader support while fixing react-window scroll calculations. Reverts the changes in code_block.tsx Also updated the changelog to include the bug number.

remove virtualizedList Updated the comments

- adds the pre-fix state as history

mgadewoll · 2025-11-14T12:06:38Z

@sravanth-space What was the force-push for? Did you rebase or add any changes?

mgadewoll · 2025-11-14T12:08:23Z

buildkite test this

sravanth-space · 2025-11-14T12:09:42Z

@sravanth-space What was the force-push for? Did you rebase or add any changes?

Sorry I have rebased without any changes.😅

mgadewoll · 2025-11-14T12:17:05Z

@sravanth-space What was the force-push for? Did you rebase or add any changes?

Sorry I have rebased without any changes.

ℹ️ @sravanth-space Just fyi, we don't have to rebase right away if the PR says This branch is out-of-date with the base branch. If there are conflicts, yes. If the PR changes are complex and might affect other components where it's better to check against new changes in main, also yes.
Otherwise, for this PR that has scoped, minimal changes it's enough to ensure the CI finishes green.

elasticmachine · 2025-11-14T12:25:09Z

💚 Build Succeeded

History

💚 Build #1925 succeeded 912a330

elasticmachine · 2025-11-14T12:38:33Z

💚 Build Succeeded

Buildkite Build
Commit: 2d429f9

History

💚 Build #5212 succeeded 912a330

github-actions bot added the community contribution (Don't delete - used for automation) label Nov 9, 2025

sravanth-space marked this pull request as ready for review November 9, 2025 11:11

sravanth-space requested a review from a team as a code owner November 9, 2025 11:11

sravanth-space changed the title ~~fix: move CodeBlock accessibility labels outside containers~~ fix[EuiCodeBlock]: move CodeBlock accessibility labels outside containers Nov 9, 2025

sravanth-space mentioned this pull request Nov 9, 2025

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

Open

sravanth-space changed the title ~~fix[EuiCodeBlock]: move CodeBlock accessibility labels outside containers~~ fix(EuiCodeBlock): fixes re-renders causing blank lines to appear when using isVirtualized if scrolled Nov 10, 2025

sravanth-space force-pushed the fix/virtualized-code-block-label-bug branch from 5d1a2a8 to 0000557 Compare November 11, 2025 15:25

mgadewoll self-requested a review November 12, 2025 10:21

mgadewoll requested changes Nov 13, 2025

View reviewed changes

sravanth-space requested a review from mgadewoll November 13, 2025 13:30

mgadewoll requested changes Nov 13, 2025

View reviewed changes

packages/eui/src/components/code/code_block_virtualized.tsx Outdated Show resolved Hide resolved

packages/eui/src/components/code/code_block_virtualized.tsx Outdated Show resolved Hide resolved

packages/eui/changelogs/upcoming/9196.md Outdated Show resolved Hide resolved

sravanth-space requested a review from mgadewoll November 13, 2025 15:42

mgadewoll approved these changes Nov 14, 2025

View reviewed changes

sravanth-space and others added 7 commits November 14, 2025 10:46

update the changelog description.

003c1dd

Add changelog entry for upcoming changes

2904163

renamed with the PR number instead of issue number.

refactor(EuiCodeBlock): remove issue reference from changelog entry

011b0e5

remove virtualizedList Updated the comments

test(vrt): add story for virtualized scrolling bug regression

48e8a7d

- adds the pre-fix state as history

test(vrt): update images after fix

2d429f9

sravanth-space force-pushed the fix/virtualized-code-block-label-bug branch from 912a330 to 2d429f9 Compare November 14, 2025 10:46

mgadewoll merged commit 3efa7c9 into elastic:main Nov 14, 2025
7 checks passed

acstll mentioned this pull request Nov 17, 2025

Update EUI to v109.1.0 elastic/kibana#243270

Open

fix(EuiCodeBlock): fixes re-renders causing blank lines to appear when using isVirtualized if scrolled #9196

fix(EuiCodeBlock): fixes re-renders causing blank lines to appear when using isVirtualized if scrolled #9196

Conversation

sravanth-space commented Nov 9, 2025 • edited by mgadewoll Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

cla-checker-service bot commented Nov 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 9, 2025

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

mgadewoll Nov 13, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

sravanth-space commented Nov 13, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mgadewoll commented Nov 13, 2025

Uh oh!

sravanth-space commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

mgadewoll commented Nov 14, 2025

Uh oh!

mgadewoll commented Nov 14, 2025

Uh oh!

mgadewoll commented Nov 14, 2025

Uh oh!

sravanth-space commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mgadewoll commented Nov 14, 2025

Uh oh!

elasticmachine commented Nov 14, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Nov 14, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sravanth-space commented Nov 9, 2025 •

edited by mgadewoll

Loading

cla-checker-service bot commented Nov 9, 2025 •

edited

Loading

mgadewoll commented Nov 13, 2025 •

edited

Loading

sravanth-space commented Nov 13, 2025 •

edited

Loading

sravanth-space commented Nov 14, 2025 •

edited

Loading