chore(flyout): test escape key down behavior with tooltip as content

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(
+        <Flyout>
+          <EuiToolTip data-test-subj="tool_tip">
+            <EuiText>Hello World</EuiText>
+          </EuiToolTip>
+        </Flyout>
+      );
+      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(
+        <Flyout>
+          <EuiToolTip data-test-subj="tool_tip">
+            <EuiText>Hello World</EuiText>
+          </EuiToolTip>
+        </Flyout>
+      );
+      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