Describe the bug
Any component that uses EuiPanel to render e.g. EuiSuperSelect, EuiDatePicker, etc., when rendered inside an EuiFlyout that has the masksProps.headerZindexLocation prop set to above will not be visible.
This is because this particular EuiFlyout will render inside an overlay mask with a z-index of 6000 (token), while the default z-index for EuiPanel is 2000 (hardcoded but overridable).
Impact and severity
Severity is high but impact is low (there's no evidence of this happening anywhere).
There's a workaround: setting the panel's z-index to a value higher than 6000.
<EuiSuperSelect
...
popoverProps={{
zIndex: 7000,
}}
/>Minimum reproducible sandbox
https://codesandbox.io/p/devbox/autumn-sun-zn8s5m?workspaceId=ws_3QHkS8M7QbnwRJNYvPkxUw
Expected behavior
The popover panel should be visible, as expected.
Additional context (Optional)
Describe the bug
Any component that uses EuiPanel to render e.g. EuiSuperSelect, EuiDatePicker, etc., when rendered inside an EuiFlyout that has the
masksProps.headerZindexLocationprop set toabovewill not be visible.This is because this particular EuiFlyout will render inside an overlay mask with a z-index of
6000(token), while the default z-index for EuiPanel is2000(hardcoded but overridable).Impact and severity
Severity is high but impact is low (there's no evidence of this happening anywhere).
There's a workaround: setting the panel's z-index to a value higher than
6000.Minimum reproducible sandbox
https://codesandbox.io/p/devbox/autumn-sun-zn8s5m?workspaceId=ws_3QHkS8M7QbnwRJNYvPkxUw
Expected behavior
The popover panel should be visible, as expected.
Additional context (Optional)
The workaround has been used in Kibana already:
elastic/kibana@13ba1ee
It has been mentioned again by Obs Exploration team, they have a maintenance issue for Discover: [Discover][Traces] Popover not visible in the waterfall document details flyout kibana#250525 (Slack thread)