From b8813fbf853e5e69318455859c27bfdeb3479c0d Mon Sep 17 00:00:00 2001 From: Jason Stoltzfus Date: Thu, 25 Apr 2024 15:16:59 -0400 Subject: [PATCH] [EuiDataGrid][CRA] Fix header cell focus when moving columns left/right (#7701) Co-authored-by: Cee Chen --- changelogs/upcoming/7698.md | 2 +- .../header/data_grid_header_cell_wrapper.tsx | 17 +++++++---------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/changelogs/upcoming/7698.md b/changelogs/upcoming/7698.md index de8dbcb613c0..c064e022d1ee 100644 --- a/changelogs/upcoming/7698.md +++ b/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)) 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 index 8bb29ce17256..b4f7b6abb934 100644 --- a/src/components/datagrid/body/header/data_grid_header_cell_wrapper.tsx +++ b/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)