diff --git a/src/components/datagrid/body/data_grid_cell_popover.spec.tsx b/src/components/datagrid/body/data_grid_cell_popover.spec.tsx index 657e542661a..03d0271ffd9 100644 --- a/src/components/datagrid/body/data_grid_cell_popover.spec.tsx +++ b/src/components/datagrid/body/data_grid_cell_popover.spec.tsx @@ -87,21 +87,74 @@ describe('EuiDataGridCellPopover', () => { }); }); - it('closes the cell popover when the originating cell is clicked', () => { - cy.realMount(); - cy.get( - '[data-gridcell-row-index="0"][data-gridcell-column-index="0"]' - ).realClick(); + describe('closes the cell popover', () => { + // Mount and open the first cell popover + beforeEach(() => { + cy.realMount(); + cy.get( + '[data-gridcell-row-index="0"][data-gridcell-column-index="0"]' + ).click(); + cy.realPress('Enter'); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]').should('exist'); + }); - cy.get('[data-test-subj="euiDataGridCellExpandButton"]').click(); - cy.get('[data-test-subj="euiDataGridExpansionPopover"]').should('exist'); + it('when the originating cell is clicked', () => { + cy.get( + '[data-gridcell-row-index="0"][data-gridcell-column-index="0"]' + ).realClick({ position: 'right' }); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]').should( + 'not.exist' + ); + }); - cy.get( - '[data-gridcell-row-index="0"][data-gridcell-column-index="0"]' - ).realClick({ position: 'right' }); - cy.get('[data-test-subj="euiDataGridExpansionPopover"]').should( - 'not.exist' + it('when the cell expand action button is clicked', () => { + cy.get('[data-test-subj="euiDataGridCellExpandButton"]').click(); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]').should( + 'not.exist' + ); + }); + + it('when anywhere outside the grid is clicked', () => { + cy.get('body').realClick({ position: 'bottomRight' }); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]').should( + 'not.exist' + ); + }); + }); + + it('does not close the cell popover when other cell actions are clicked', () => { + const cellActions = [ + ({ Component }) => ( + + ), + ({ Component }) => ( + + ), + ]; + cy.realMount( + ); + cy.get('[data-test-subj="dataGridRowCell"]').first().click(); + cy.realPress('Enter'); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]').should('exist'); + + cy.get('[data-test-subj="cellActionA"]').first().realClick(); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]').should('exist'); + + // Close and re-open the cell popover by clicking + cy.get('[data-test-subj="euiDataGridCellExpandButton"]').click(); + cy.get('[data-test-subj="euiDataGridCellExpandButton"]').click(); + + cy.get('[data-test-subj="cellActionB"]').first().realClick(); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]').should('exist'); }); it('allows consumers to use setCellPopoverProps, passed from renderCellPopover, to customize popover props', () => { diff --git a/src/components/datagrid/body/data_grid_cell_popover.tsx b/src/components/datagrid/body/data_grid_cell_popover.tsx index e7f2e4f0d0a..c02f771fa5e 100644 --- a/src/components/datagrid/body/data_grid_cell_popover.tsx +++ b/src/components/datagrid/body/data_grid_cell_popover.tsx @@ -88,9 +88,9 @@ export const useCellPopover = (): { // clicking the expansion cell action triggers an outside click const onClickOutside = useCallback( (event: Event) => { - if (!popoverAnchor) return; - const cellActions = popoverAnchor.previousElementSibling; - if (cellActions?.contains(event.target as Node) === false) { + const cellActions = + popoverAnchor?.parentElement?.parentElement?.previousElementSibling; + if (!cellActions?.contains(event.target as Node)) { closeCellPopover(); } },