From 5a979b06b296521d169e61277dba8f28a8d9eee9 Mon Sep 17 00:00:00 2001 From: Jason Stoltzfus Date: Thu, 18 Apr 2024 17:24:09 -0400 Subject: [PATCH 1/3] Quick fix --- .../header/data_grid_header_cell_wrapper.tsx | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 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 index 8bb29ce1725..1430d54b519 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 @@ -49,20 +49,26 @@ export const EuiDataGridHeaderCellWrapper: FunctionComponent< }, [index, setFocusedCell]); const [isFocused, setIsFocused] = useState(false); - useEffect(() => { - onFocusUpdate([index, -1], (isFocused: boolean) => { - setIsFocused(isFocused); - }); - }, [index, onFocusUpdate]); - useEffect(() => { + const updateFocus = (isFocused: Boolean, headerEl: HTMLDivElement | null) => { 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]); + } + + useEffect(() => { + onFocusUpdate([index, -1], (isFocused: boolean) => { + setIsFocused(isFocused); + updateFocus(isFocused, headerEl); + }); + }, [index, onFocusUpdate]); + + useEffect(() => { + updateFocus(isFocused, headerEl); + }, [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) From 156a98d4bd985966f753de6c4e395d92599838f1 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 25 Apr 2024 11:23:21 -0700 Subject: [PATCH 2/3] [PR feedback] Simplify fns/useEffects --- .../header/data_grid_header_cell_wrapper.tsx | 23 ++++++------------- 1 file changed, 7 insertions(+), 16 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 index 1430d54b519..b4f7b6abb93 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 @@ -49,26 +49,17 @@ export const EuiDataGridHeaderCellWrapper: FunctionComponent< }, [index, setFocusedCell]); const [isFocused, setIsFocused] = useState(false); - - const updateFocus = (isFocused: Boolean, headerEl: HTMLDivElement | null) => { - if (isFocused && headerEl) { - // Only focus the cell if not already focused on something in the cell - if (!headerEl.contains(document.activeElement)) { - headerEl.focus(); - } - } - } - useEffect(() => { onFocusUpdate([index, -1], (isFocused: boolean) => { setIsFocused(isFocused); - updateFocus(isFocused, headerEl); + if (isFocused && headerEl) { + // Only focus the cell if not already focused on something in the cell + if (!headerEl.contains(document.activeElement)) { + headerEl.focus(); + } + } }); - }, [index, onFocusUpdate]); - - useEffect(() => { - updateFocus(isFocused, headerEl); - }, [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) From 0828adea97bcbb7dcf2092cca7caeceed57c38eb Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 25 Apr 2024 11:23:38 -0700 Subject: [PATCH 3/3] combine changelog to point at multiple PRs --- changelogs/upcoming/7698.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelogs/upcoming/7698.md b/changelogs/upcoming/7698.md index de8dbcb613c..c064e022d1e 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))