elastic / elastic/eui

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

Open
#9,784 0 comments 0 reactions 0 assignees View on GitHub
data grid
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 15h
Merged PRs (30d)
69

Description

**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 https://github.com/elastic/kibana/issues/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 https://github.com/elastic/kibana/pull/276423. Ideally I would like this to be solved at the eui side.

**Environment and versions**
kibana in main is using 116.5.0

Contributor guide

Open the contributing guide

Research direction

Start by locating the EuiDataGrid resize and single-column sizing logic, then reproduce the issue with one unsized column inside an opening EuiAccordion at a viewport width near the scrollbar boundary. Done means the grid settles without a ResizeObserver loop or an unresponsive tab, with regression coverage for the reported conditions.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.