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