EuiDataGrid can enter an infinite ResizeObserver loop and hang the tab when it has exactly one unsized column inside a size-animating ancestor
- 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
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