diff --git a/packages/eui/src/components/flyout/flyout.spec.tsx b/packages/eui/src/components/flyout/flyout.spec.tsx
index c3b2b841965..9ac1baf9367 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 { EuiButton } from '../button';
const childrenDefault = (
<>
@@ -92,6 +94,46 @@ describe('EuiFlyout', () => {
});
});
+ describe('Close behavior: overlay elements as children', () => {
+ it('closes the flyout when the EuiToolTip is not focused', () => {
+ cy.mount(
+
+
+
+ Show tooltip
+
+
+
+ );
+ cy.get('[data-test-subj="tool_tip"]').should('not.exist');
+
+ cy.realPress('Escape');
+ cy.get('[data-test-subj="flyoutSpec"]').should('not.exist');
+ });
+
+ it('does not close the flyout when the tooltip is shown but closes the tooltip', () => {
+ cy.mount(
+
+
+ Show tooltip
+
+
+ }
+ >
+ );
+ cy.get('[data-test-subj="tool_tip"]').should('not.exist');
+
+ cy.repeatRealPress('Tab', 2);
+ cy.get('[data-test-subj="tool_tip"]').should('exist');
+
+ cy.realPress('Escape');
+ cy.get('[data-test-subj="tool_tip"]').should('not.exist');
+ 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