diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx index 30273b49fed..920736b98d2 100644 --- a/src/components/datagrid/body/data_grid_cell.tsx +++ b/src/components/datagrid/body/data_grid_cell.tsx @@ -400,6 +400,10 @@ export class EuiDataGridCell extends Component< }, 0 ); + // Close the cell popover if the popover was open and the user clicked the cell + if (this.props.popoverContext.popoverIsOpen) { + this.props.popoverContext.closeCellPopover(); + } } }; 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 378442a66ac..f609592138e 100644 --- a/src/components/datagrid/body/data_grid_cell_popover.spec.tsx +++ b/src/components/datagrid/body/data_grid_cell_popover.spec.tsx @@ -83,4 +83,21 @@ describe('EuiDataGridCellPopover', () => { .should('have.attr', 'data-gridcell-row-index', '1'); }); }); + + 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(); + + cy.get('[data-test-subj="euiDataGridCellExpandButton"]').realClick(); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]').should('exist'); + + cy.get( + '[data-gridcell-row-index="0"][data-gridcell-column-index="0"]' + ).realClick(); + cy.get('[data-test-subj="euiDataGridExpansionPopover"]').should( + 'not.exist' + ); + }); }); diff --git a/src/components/datagrid/body/data_grid_cell_popover.test.tsx b/src/components/datagrid/body/data_grid_cell_popover.test.tsx index 792e74b558f..da00dc334cd 100644 --- a/src/components/datagrid/body/data_grid_cell_popover.test.tsx +++ b/src/components/datagrid/body/data_grid_cell_popover.test.tsx @@ -101,7 +101,6 @@ describe('useCellPopover', () => { hasArrow={false} isOpen={true} onKeyDown={[Function]} - onTrapDeactivation={[Function]} panelClassName="euiDataGridRowCell__popover" panelPaddingSize="s" panelProps={ diff --git a/src/components/datagrid/body/data_grid_cell_popover.tsx b/src/components/datagrid/body/data_grid_cell_popover.tsx index 03e59a61060..32a38364aae 100644 --- a/src/components/datagrid/body/data_grid_cell_popover.tsx +++ b/src/components/datagrid/body/data_grid_cell_popover.tsx @@ -83,7 +83,6 @@ export const useCellPopover = (): { 'data-test-subj': 'euiDataGridExpansionPopover', }} closePopover={closeCellPopover} - onTrapDeactivation={closeCellPopover} onKeyDown={(event) => { if (event.key === keys.F2 || event.key === keys.ESCAPE) { event.preventDefault(); diff --git a/upcoming_changelogs/5797.md b/upcoming_changelogs/5797.md new file mode 100644 index 00000000000..3124fd3f845 --- /dev/null +++ b/upcoming_changelogs/5797.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed an `EuiDataGrid` bug occurring when closing cell popovers on clicking the originating cell. The original fix was unintentionally affecting cell popovers with nested modals, popovers, etc.