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