Fix flaky Cypress test

- caused by race condition with ref not updating `HandleInteractiveChildren`
elastic · Jan 5, 2024 · 1d9e46f · 1d9e46f
1 parent d6c70f6
commit 1d9e46f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
@@ -28,7 +28,9 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       <button
         aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
         class="euiDataGridHeaderCell__button"
+        data-euigrid-tab-managed="true"
         data-test-subj="dataGridHeaderCellActionButton-columnA"
+        tabindex="-1"
       >
         <div
           class="euiDataGridHeaderCell__content"
@@ -79,7 +81,9 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       <button
         aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
         class="euiDataGridHeaderCell__button"
+        data-euigrid-tab-managed="true"
         data-test-subj="dataGridHeaderCellActionButton-columnB"
+        tabindex="-1"
       >
         <div
           class="euiDataGridHeaderCell__content"

diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
@@ -32,7 +32,9 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
         <button
           aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
           class="euiDataGridHeaderCell__button"
+          data-euigrid-tab-managed="true"
           data-test-subj="dataGridHeaderCellActionButton-columnA"
+          tabindex="-1"
         >
           <div
             class="euiDataGridHeaderCell__content"
@@ -83,7 +85,9 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
         <button
           aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
           class="euiDataGridHeaderCell__button"
+          data-euigrid-tab-managed="true"
           data-test-subj="dataGridHeaderCellActionButton-columnB"
+          tabindex="-1"
         >
           <div
             class="euiDataGridHeaderCell__content"

diff --git a/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap b/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
@@ -20,7 +20,9 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
   <button
     aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
     class="euiDataGridHeaderCell__button"
+    data-euigrid-tab-managed="true"
     data-test-subj="dataGridHeaderCellActionButton-someColumn"
+    tabindex="-1"
   >
     <div
       class="euiDataGridHeaderCell__content"

diff --git a/src/components/datagrid/body/header/data_grid_header_cell_wrapper.tsx b/src/components/datagrid/body/header/data_grid_header_cell_wrapper.tsx
@@ -12,7 +12,6 @@ import React, {
   FocusEventHandler,
   useContext,
   useEffect,
-  useRef,
   useState,
   useCallback,
 } from 'react';
@@ -41,7 +40,8 @@ export const EuiDataGridHeaderCellWrapper: FunctionComponent<
 }) => {
   const classes = classnames('euiDataGridHeaderCell', className);
 
-  const headerRef = useRef<HTMLDivElement>(null);
+  // Must be a state and not a ref to trigger a HandleInteractiveChildren rerender
+  const [headerEl, setHeaderEl] = useState<HTMLDivElement | null>(null);
 
   const { setFocusedCell, onFocusUpdate } = useContext(DataGridFocusContext);
   const updateCellFocusContext = useCallback(() => {
@@ -56,30 +56,29 @@ export const EuiDataGridHeaderCellWrapper: FunctionComponent<
   }, [index, onFocusUpdate]);
 
   useEffect(() => {
-    if (isFocused) {
-      const cell = headerRef.current!;
+    if (isFocused && headerEl) {
       // Only focus the cell if not already focused on something in the cell
-      if (!cell.contains(document.activeElement)) {
-        cell.focus();
+      if (!headerEl.contains(document.activeElement)) {
+        headerEl.focus();
       }
     }
-  }, [isFocused]);
+  }, [isFocused, headerEl]);
 
   // For cell headers with actions, auto-focus into the button instead of the cell wrapper div
   // The button text is significantly more useful to screen readers (e.g. contains sort order & hints)
   const onFocus: FocusEventHandler = useCallback(
     (e) => {
-      if (hasActionsPopover && e.target === headerRef.current) {
+      if (hasActionsPopover && e.target === headerEl) {
         focusActionsButton?.();
       }
     },
-    [hasActionsPopover, focusActionsButton]
+    [hasActionsPopover, focusActionsButton, headerEl]
   );
 
   return (
     <div
       role="columnheader"
-      ref={headerRef}
+      ref={setHeaderEl}
       tabIndex={isFocused && !isActionsButtonFocused ? 0 : -1}
       onFocus={onFocus}
       className={classes}
@@ -92,7 +91,7 @@ export const EuiDataGridHeaderCellWrapper: FunctionComponent<
       {...rest}
     >
       <HandleInteractiveChildren
-        cellEl={headerRef.current}
+        cellEl={headerEl}
         updateCellFocusContext={updateCellFocusContext}
         renderFocusTrap={!hasActionsPopover}
       >