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();
}
},