From 7acdd8b3f2aac6b5877e7d1f5ced39d602af0e8c Mon Sep 17 00:00:00 2001
From: Weronika Olejniczak <weronika.olejniczak@elastic.co>
Date: Fri, 22 Nov 2024 14:01:58 +0100
Subject: [PATCH] chore(flyout): test escape key down behavior with tooltip as
 content

---
 .../eui/src/components/flyout/flyout.spec.tsx | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

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(
+        <Flyout>
+          <EuiToolTip content="Tooltip text here" data-test-subj="tool_tip">
+            <EuiButton data-test-subj="tool_tip_trigger">
+              Show tooltip
+            </EuiButton>
+          </EuiToolTip>
+        </Flyout>
+      );
+      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(
+        <Flyout
+          children={
+            <EuiToolTip content="Tooltip text here" data-test-subj="tool_tip">
+              <EuiButton data-test-subj="tool_tip_trigger">
+                Show tooltip
+              </EuiButton>
+            </EuiToolTip>
+          }
+        ></Flyout>
+      );
+      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