elastic / elastic/eui

[Strict Mode] EuiAccordion doesn't display within EuiFlyout

Open
#9,029 3 comments 1 reaction 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**

`EuiAccordion` doesn't render children when rendered within `EuiFlyout`. The `contentHeight` is `0`.

Docs page:
- [Accordion](https://eui.elastic.co/docs/components/containers/accordion/)
- [Flyout](https://eui.elastic.co/docs/components/containers/flyout/)

| Strict Mode | No Strict Mode |
| ------------ | --------------- |
| Image | Image |

**Impact and severity**

There is a fair usage of the composition. Severity is **medium**.

There is **no known workaround**.

Usages within Kibana:

**Automatic Import CEL Configuration** (`create_cel_config.tsx`): 2 accordions
**Fleet Output Configuration** (`edit_output_flyout/index.tsx`): 1 accordion
**Enterprise Search API Key Creation** (`create_api_key_flyout.tsx`): 3 accordions
**Search Synonyms API Connection** (`connect_to_api_flyout.tsx`): 2 accordions
**Fleet Agent Migration** (`migrate_agent_flyout/index.tsx`): 6 accordions
**Cloud Security Posture Findings Overview** (`overview_tab.tsx`): 3-4 accordions (dynamic)
**Vulnerability Overview** (`vulnerability_overview_tab.tsx`): 3 accordions

This is not a comprehensive list.

**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/devbox/wizardly-pike-4fr5dl?workspaceId=ws_TMucNWc58UWLV8fKvQ7Kfh)

**To Reproduce**

1. Enable Strict Mode.
2. Render `EuiAccordion` within `EuiFlyout`.
3. Notice how the content of the accordion doesn't render and `contentHeight` is `0`.

**Expected behavior**

`EuiAccordion` works correctly and the content renders when mounted inside `EuiFlyout`.

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.