Fix popover/focus trap bug when clicking cell actions and then outsid…

…e popover
elastic · Nov 23, 2023 · c00f6e0 · c00f6e0
1 parent a86a523
commit c00f6e0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/components/datagrid/body/data_grid_cell_popover.spec.tsx b/src/components/datagrid/body/data_grid_cell_popover.spec.tsx
@@ -155,6 +155,18 @@ describe('EuiDataGridCellPopover', () => {
 
     cy.get('[data-test-subj="cellActionB"]').first().realClick();
     cy.get('[data-test-subj="euiDataGridExpansionPopover"]').should('exist');
+
+    // Clicking the cell actions outside the popover should not have disabled the focus trap
+    cy.repeatRealPress('Tab', 3);
+    cy.focused().should(
+      'have.attr',
+      'data-test-subj',
+      'euiDataGridExpansionPopover'
+    );
+    cy.get('body').realClick({ position: 'bottomRight' });
+    cy.get('[data-test-subj="euiDataGridExpansionPopover"]').should(
+      'not.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
@@ -107,7 +107,7 @@ export const useCellPopover = (): {
       anchorPosition={popoverAnchorPosition}
       repositionToCrossAxis={false}
       {...cellPopoverProps}
-      focusTrapProps={{ onClickOutside }}
+      focusTrapProps={{ onClickOutside, clickOutsideDisables: false }}
       panelProps={{
         'data-test-subj': 'euiDataGridExpansionPopover',
         ...(cellPopoverProps.panelProps || {}),