Skip to content

EuiDataGrid can enter an infinite ResizeObserver loop and hang the tab when it has exactly one unsized column inside a size-animating ancestor #9784

Description

@stratoula

Describe the bug
EuiDataGrid can lock up the browser's main thread indefinitely when two conditions are both true:

  1. The grid has exactly one column with no explicit initialWidth.
  2. The grid is rendered inside an ancestor whose own size is also being measured/animated via ResizeObserver (e.g. an EuiAccordion that is currently expanding).

You can see it happening at kibana here elastic/kibana#276400

Steps to reproduce

  1. Render an EuiDataGrid with exactly one column and no initialWidth set on it.
  2. Mount it inside an EuiAccordion (or any container that measures/animates its own size via ResizeObserver) at the moment the accordion opens.
  3. Give the accordion enough width that the single stretched column's rendered width lands close to the scrollbar-visibility boundary (in practice this shows up more reliably at certain viewport widths, not all).
  4. Observe: a brief visual flicker, then the tab becomes completely unresponsive.

Expected behavior

The grid should settle into a stable layout even with a single unsized column, without relying on a ResizeObserver feedback loop that has no termination condition.

Impact and severity
Very problematic for kibana ES|QL charts but we are mitigating elastic/kibana#276423. Ideally I would like this to be solved at the eui side.

Environment and versions
kibana in main is using 116.5.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions