[EuiFlyout] Incorrect `animation-fill-mode` value when `pushAnimation = false`
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
**Reported by**
This bug report comes from an investigation of an issue reported by @stratoula on Slack.
**Describe the bug**
The EuiFlyout animations changes introduced in EUI v111.0.0 together with the Flyout System introduced an invincible change to `animation-fill-mode` when `pushAnimation = false`. Previously, `animation-fill-mode` was set to `none` but due to CSS restructuring, it's now set to `forwards`. This has no visual impact, but clashes with Kibana's ESQLEditor, which uses Monaco.
**Impact and severity**
Rendering the Monaco editor in EuiFlyout could be considered an edge case for most consumers, but it is a critical feature in Kibana.
Kibana now uses a hardcoded CSS override that detects this exact case and applies the correct style. We should prioritize updating our implementation regardless and remove the override from Kibana as soon as possible.
**Environment and versions**
- EUI version: v111.0.0
- React version: N/A
- Kibana version (if applicable): N/A
- Browser: N/A
- Operating System: N/A
**To Reproduce**
1. Go to _Dashboards_ -> _New dashboard_
2. Click _Add_, select _New panel_ and then _ES|QL_
3. Type `FROM logs* |` into the ESQL editor and observe there's no suggestions list rendered due to this issue
**Expected behavior**
EuiFlyout should not apply `animation-fill-mode` when `pushAnimation = false`
Contributor guide
Assessment
This issue has not been assessed yet.