elastic / elastic/eui

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

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

Description

**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)**

Image

**Additional context (Optional)**

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

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.