[EuiCodeBlock] Re-renders cause blank lines to appear when using `isVirtualized` if scrolled
- 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)**
**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
Assessment
This issue has not been assessed yet.