Avoid focus fighting when a datagrid cell content has its own popover

CHANGELOG.md

@@ -11,6 +11,7 @@
 - Added `regressionJob`, `outlierDetectionJob` and `classificationJob` icons to Machine Learning icon set, updated others. ([#3931](https://github.com/elastic/eui/pull/3931))
 - Fixed bug in `EuiDataGrid` which sometimes prevented header cells from being focusabled ([#3943](https://github.com/elastic/eui/pull/3943))
 - Fixed bug in `EuiFieldSearch` where a default value would not include the clear button ([#3958](https://github.com/elastic/eui/pull/3958))
+- Fixed focus fighting bug when `EuiDataGrid` cell content manages its own popover ([#3951](https://github.com/elastic/eui/pull/3951))
 
 ## [`28.2.0`](https://github.com/elastic/eui/tree/v28.2.0)
 

src-docs/src/i18ntokens.json

@@ -2671,4 +2671,4 @@
     },
     "filepath": "src/components/tree_view/tree_view.tsx"
   }
-]
+]

src/components/datagrid/data_grid_cell.tsx

@@ -28,6 +28,7 @@ import React, {
   KeyboardEvent,
   ReactChild,
   MutableRefObject,
+  FocusEvent,
 } from 'react';
 import classNames from 'classnames';
 import tabbable from 'tabbable';
@@ -227,14 +228,27 @@ export class EuiDataGridCell extends Component<
     this.preventTabbing();
   };
 
-  onFocus = () => {
-    const { onCellFocus, colIndex, visibleRowIndex, isExpandable } = this.props;
-    onCellFocus([colIndex, visibleRowIndex]);
+  onFocus = (e: FocusEvent<HTMLDivElement>) => {
+    // only perform this logic when the event's originating element (e.target) is
+    // the wrapping element with the onFocus logic
+    // reasons:
+    //  * the outcome is only meaningful when the focus shifts to the wrapping element
+    //  * if the cell children include portalled content React will bubble the focus
+    //      event up, which can trigger the focus() call below, causing focus lock fighting
+    if (this.cellRef.current === e.target) {
+      const {
+        onCellFocus,
+        colIndex,
+        visibleRowIndex,
+        isExpandable,
+      } = this.props;
+      onCellFocus([colIndex, visibleRowIndex]);
 
-    const interactables = this.getInteractables();
-    if (interactables.length === 1 && isExpandable === false) {
-      interactables[0].focus();
-      this.setState({ disableCellTabIndex: true });
+      const interactables = this.getInteractables();
+      if (interactables.length === 1 && isExpandable === false) {
+        interactables[0].focus();
+        this.setState({ disableCellTabIndex: true });
+      }
     }
   };