Fix flaky Cypress test

- caused by race condition with ref not updating `HandleInteractiveChildren`
elastic · Jan 5, 2024 · 9f8601e · 9f8601e
1 parent d6c70f6
commit 9f8601e
Showing 1 changed file with 10 additions and 10 deletions.
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
@@ -41,7 +41,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 +57,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 +92,7 @@ export const EuiDataGridHeaderCellWrapper: FunctionComponent<
       {...rest}
     >
       <HandleInteractiveChildren
-        cellEl={headerRef.current}
+        cellEl={headerEl}
         updateCellFocusContext={updateCellFocusContext}
         renderFocusTrap={!hasActionsPopover}
       >