Skip to content

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

@dennis-tismenko

Description

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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions