elastic / elastic/eui

[Strict Mode] EuiResizeObserver doesn't work

Open
#8,787 3 comments 0 reactions 0 assignees View on GitHub
help wanted
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**Describe the bug**

When Strict Mode is enabled, `EuiResizeObserver` doesn't work. Example usage in `EuiAccordion` - [dynamic height changes](https://eui.elastic.co/docs/components/containers/accordion/#when-content-changes-dynamically) don't work.

[Docs page](https://eui.elastic.co/docs/utilities/resize-observer/)

| Strict Mode | No Strict Mode |
| ------------ | --------------- |
| ![Image](https://github.com/user-attachments/assets/e22ad847-39d7-408a-a401-b4a6f8b7856b) | ![Image](https://github.com/user-attachments/assets/a33228e1-456d-413c-bc64-e8e264792f15) |

**Impact and severity**

It impacts all end-users of our consumers. **Severe**.

There is **no known workaround**.

[[Search](https://github.com/search?q=repo%3Aelastic%2Feui%20%3CEuiResizeObserver&type=code)] `EuiResizeObserver` is used internally in:
- `EuiRange` ([Kibana](https://github.com/search?q=repo%3Aelastic%2Fkibana+%3CEuiRange&type=code), 42)
- `EuiToolTip` ([Kibana](https://github.com/search?q=repo%3Aelastic%2Fkibana+%3CEuiToolTip&type=code), 856)
- `EuiAccordion` ([Kibana](https://github.com/search?q=repo%3Aelastic%2Fkibana+%3CEuiAccordion&type=code), 213)
- `EuiContextMenu` ([Kibana](https://github.com/search?q=repo%3Aelastic%2Fkibana+%3CEuiContextMenu&type=code), 335)
- `EuiTextTruncate` ([Kibana](https://github.com/search?q=repo%3Aelastic%2Fkibana+%3CEuiTextTruncate&type=code), 12)
- `EuiMarkdownEditor` ([Kibana](https://github.com/search?q=repo%3Aelastic%2Fkibana+%3CEuiMarkdownEditor&type=code), 10)

[[Search](https://github.com/search?q=repo%3Aelastic%2Fkibana%20%3CEuiResizeObserver&type=code)] `EuiResizeObserver` is used in Kibana 16 times

**Environment and versions**

- EUI version: ~
- React version: React 18 (Strict Mode)
- Kibana version (if applicable): ~
- Browser: ~
- Operating System: ~

**Minimum reproducible sandbox**

[Codesandbox](https://codesandbox.io/p/sandbox/wandering-wood-pp238z)

**To Reproduce**

1. Enable Strict Mode in your environment.
2. Render `EuiResizeObserver`.
3. Notice that it doesn't react to resizes and returned values don't change.

**Expected behavior**

`EuiResizeObserver` reacts to dimension changes and returns correct values.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.