diff --git a/packages/eui/src/components/flyout/flyout.spec.tsx b/packages/eui/src/components/flyout/flyout.spec.tsx
index c3b2b841965..af42efd897f 100644
--- a/packages/eui/src/components/flyout/flyout.spec.tsx
+++ b/packages/eui/src/components/flyout/flyout.spec.tsx
@@ -15,6 +15,8 @@ import React, { useState } from 'react';
import { EuiGlobalToastList } from '../toast';
import { EuiHeader } from '../header';
import { EuiFlyout } from './flyout';
+import { EuiToolTip } from '../tool_tip';
+import { EuiText } from '../text';
const childrenDefault = (
<>
@@ -92,6 +94,33 @@ describe('EuiFlyout', () => {
});
});
+ describe('Close behavior: overlay elements as children', () => {
+ it('closes the flyout when the EuiToolTip is not focused', () => {
+ cy.mount(
+
+
+ Hello World
+
+
+ );
+ cy.realPress('Escape'); // Press Escape key to trigger close
+ cy.get('[data-test-subj="flyoutSpec"]').should('not.exist');
+ });
+
+ it('does not close the flyout when the EuiToolTip is focused', () => {
+ cy.mount(
+
+
+ Hello World
+
+
+ );
+ cy.get('[data-test-subj="tool_tip"]').focus(); // Focus the EuiToolTip
+ cy.realPress('Escape'); // Press Escape key to trigger close
+ cy.get('[data-test-subj="flyoutSpec"]').should('exist');
+ });
+ });
+
describe('Close behavior: outside clicks', () => {
// We're using toasts here to trigger outside clicks, as a UX case where
// we would generally expect toasts overlaid on top of a flyout *not* to close the flyout