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

* Don't process cells multiple times, and furthermore process cells not the entire grid (or worse 😱)

* unit test

* Moved and updated unit test for getParentCellContent

* Refactor tests into better-explained cases

* changelog

Author: chandlerprall

CHANGELOG.md

@@ -13,6 +13,10 @@
 - Added `useGeneratedHtmlId` utility, which memoizes the randomly generated ID on mount and prevents regenerated IDs on component rerender ([#5133](https://github.com/elastic/eui/pull/5133))
 - Fixed `z-index` styles that were causing parts of `EuiResizableContainer` to overlap `EuiHeader` ([#5164](https://github.com/elastic/eui/pull/5164))
 
+**Bug fixes**
+
+- Fixed [de]optimization bug in `EuiDataGrid` when cells are removed from the DOM via virtualization ([#5163](https://github.com/elastic/eui/pull/5163))
+
 **Theme: Amsterdam**
 
 - Deprecated `display` prop of `EuiTabs` in favor of unified styles and `bottomBorder` ([#5135](https://github.com/elastic/eui/pull/5135))

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,39 @@ describe('EuiDataGridBody', () => {
   });
 
   // TODO: Test tabbing in Cypress
+
+  // TODO: Test column resizing in Cypress
+});
+
+describe('getParentCellContent', () => {
+  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];
+
+  it('locates the cell element when starting with the cell itself', () => {
+    expect(getParentCellContent(cell)).toBe(cell);
+  });
+
+  it('locates the cell element when starting with an element inside the cell', () => {
+    expect(getParentCellContent(span!)).toBe(cell);
+  });
+
+  it('locates the cell element when starting with a text node inside the cell', () => {
+    expect(getParentCellContent(text!)).toBe(cell);
+  });
+
+  it('does not locate the cell element when starting outside the 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