[Strict Mode] EuiAccordion doesn't display within EuiFlyout
- 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 |
| ------------ | --------------- |
| |
|
**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
Assessment
This issue has not been assessed yet.