Reported by

@akowalska622

Describe the bug

See elastic/kibana#246719. The issue is that the ref is not passed to the underlying EuiManagedFlyout (and ultimately EuiFlyoutComponent) when the session prop is used (e.g. session="start" or session="inherit").

The EuiFlyout component delegates to EuiFlyoutMain or EuiFlyoutChild when a session is active. Neither of these components accept or forward a ref. Furthermore, EuiManagedFlyout, which they both render, creates its own internal ref for useResizeObserver and does not accept an external ref.

Impact and severity

It blocks the "Unified Doc Viewer" opt-in in Kibana because it makes the flyout content not keyboard accessible.

Environment and versions

• EUI version: 111.1.0
• React version: -
• Kibana version (if applicable): -
• Browser: -
• Operating System: -

Minimum reproducible sandbox

To Reproduce

Steps to reproduce the behavior:

1. Create a component that renders <EuiFlyout session="start" ref={myRef}>.
2. Observe that myRef.current remains null or undefined even after the flyout is mounted.
3. Compare with <EuiFlyout ref={myRef}> (without session), where myRef.current is correctly populated.

Expected behavior

The ref passed to EuiFlyout should be forwarded to the underlying DOM element regardless of whether the session prop is used or not.

Screenshots (Optional)

Additional context (Optional)

The fix requires:

1. Updating EuiManagedFlyout to use forwardRef.
2. Merging the internal flyoutRef (used for resize observer) with the forwarded ref in EuiManagedFlyout.
3. Updating EuiFlyoutMain and EuiFlyoutChild to use forwardRef and pass the ref to EuiManagedFlyout.
4. Updating EuiFlyout to pass the ref to EuiFlyoutMain and EuiFlyoutChild.