[EuiDataGrid][CRA] Fix header cell focus when moving columns left/rig…

…ht (elastic#7701)

Co-authored-by: Cee Chen <[email protected]>

changelogs/upcoming/7698.md

@@ -1,3 +1,3 @@
 **Bug fixes**
 
-- Fixed a focus bug with `EuiDataGrid`s with `leadingControlColumns` when moving columns to the left/right
+- Fixed a focus bug with `EuiDataGrid`s with `leadingControlColumns` when moving columns to the left/right ([#7701](https://github.com/elastic/eui/pull/7701))

src/components/datagrid/body/header/data_grid_header_cell_wrapper.tsx

@@ -52,17 +52,14 @@ export const EuiDataGridHeaderCellWrapper: FunctionComponent<
   useEffect(() => {
     onFocusUpdate([index, -1], (isFocused: boolean) => {
       setIsFocused(isFocused);
-    });
-  }, [index, onFocusUpdate]);
-
-  useEffect(() => {
-    if (isFocused && headerEl) {
-      // Only focus the cell if not already focused on something in the cell
-      if (!headerEl.contains(document.activeElement)) {
-        headerEl.focus();
+      if (isFocused && headerEl) {
+        // Only focus the cell if not already focused on something in the cell
+        if (!headerEl.contains(document.activeElement)) {
+          headerEl.focus();
+        }
       }
-    }
-  }, [isFocused, headerEl]);
+    });
+  }, [index, onFocusUpdate, 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)