[EuiDataGrid] Actually fix calls to tabbable instead of moving the issue to a different part of the code

src/components/datagrid/body/data_grid_body.test.tsx

@@ -13,7 +13,7 @@ import { DataGridSortingContext } from '../data_grid_context';
 import { schemaDetectors } from '../data_grid_schema';
 import { RowHeightUtils } from '../row_height_utils';
 
-import { EuiDataGridBody } from './data_grid_body';
+import { EuiDataGridBody, getParentCellContent } from './data_grid_body';
 
 describe('EuiDataGridBody', () => {
   const requiredProps = {
@@ -118,4 +118,31 @@ describe('EuiDataGridBody', () => {
   });
 
   // TODO: Test tabbing in Cypress
+
+  // TODO: Test column resizing in Cypress
+});
+
+describe('getParentCellContent', () => {
+  it("locates the provided element's cell", () => {
+    const doc = document.createDocumentFragment();
+
+    const body = document.createElement('body');
+    doc.appendChild(body);
+
+    const cell = document.createElement('div');
+    cell.setAttribute('data-datagrid-cellcontent', 'true');
+    body.appendChild(cell);
+
+    const span = document.createElement('span');
+    span.textContent = 'Here comes the text';
+    cell.appendChild(span);
+
+    const text = span.childNodes[0];
+
+    expect(getParentCellContent(cell)).toBe(cell);
+    expect(getParentCellContent(span!)).toBe(cell);
+    expect(getParentCellContent(text)).toBe(cell);
+    expect(getParentCellContent(text)).toBe(cell);
+    expect(getParentCellContent(body)).toBeNull();
+  });
 });

src/components/datagrid/body/data_grid_body.tsx

@@ -248,16 +248,16 @@ const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest');
  * and search its ancestors for a div[data-datagrid-cellcontent], if any,
  * which is a valid target for disabling tabbing within
  */
-function getParentCellContent(_element: Node | HTMLElement) {
+export function getParentCellContent(_element: Node | HTMLElement) {
   let element: HTMLElement | null =
     _element.nodeType === document.ELEMENT_NODE
       ? (_element as HTMLElement)
       : _element.parentElement;
 
   while (
-    element &&
-    element.nodeName !== 'div' &&
-    element.hasAttribute('data-datagrid-cellcontent')
+    element && // we haven't walked off the document yet
+    element.nodeName !== 'div' && // looking for a div
+    !element.hasAttribute('data-datagrid-cellcontent') // that has data-datagrid-cellcontent
   ) {
     element = element.parentElement;
   }
@@ -592,10 +592,16 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
   }, [unconstrainedHeight, wrapperDimensions, isFullScreen]);
 
   const preventTabbing = useCallback((records: MutationRecord[]) => {
+    // multiple mutation records can implicate the same cell
+    // so be sure to only check each cell once
+    const processedCells = new Set();
+
     for (let i = 0; i < records.length; i++) {
       const record = records[i];
       // find the cell content owning this mutation
       const cell = getParentCellContent(record.target);
+      if (processedCells.has(cell)) continue;
+      processedCells.add(cell);
 
       if (cell) {
         // if we found it, disable tabbable elements