elastic / elastic/eui

[EuiFlyout] Incorrect `animation-fill-mode` value when `pushAnimation = false`

Open
#9,287 1 comment 0 reactions 1 assignee Claimed by @tkajtoch View on GitHub
stale-issue
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

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.