[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.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

src/components/datagrid/data_grid.test.tsx

@@ -18,6 +18,7 @@ import { EuiDataGridColumnResizer } from './body/header/data_grid_column_resizer
 import { EuiDataGridRowHeightOption } from './data_grid_types';
 import { keys } from '../../services';
 import { act } from 'react-dom/test-utils';
+import { getParentCellContent } from './body/data_grid_body';
 
 jest.mock('./row_height_utils', () => {
   return {
@@ -2749,3 +2750,39 @@ describe('EuiDataGrid', () => {
     });
   });
 });
+
+describe('getParentCellContent', () => {
+  it("locates the provided element's cell", () => {
+    const component = mount(
+      <EuiDataGrid
+        {...requiredProps}
+        columns={[{ id: 'A' }, { id: 'B' }, { id: 'C' }]}
+        columnVisibility={{
+          visibleColumns: ['A', 'B', 'C'],
+          setVisibleColumns: () => {},
+        }}
+        rowCount={10}
+        renderCellValue={() => (
+          <div>
+            <span>This is in a cell</span>
+          </div>
+        )}
+      />
+    );
+    const cell = component
+      .find('[data-datagrid-cellcontent]')
+      .first()
+      .getDOMNode();
+    expect(cell).not.toBeNull();
+
+    const span = cell.querySelector('span');
+    expect(span).not.toBeNull();
+
+    const text = span!.childNodes[0];
+    expect(text).not.toBeNull();
+
+    expect(getParentCellContent(cell)).toBe(cell);
+    expect(getParentCellContent(span!)).toBe(cell);
+    expect(getParentCellContent(text)).toBe(cell);
+  });
+});