Caught by @miukimiu in #5561 (review):
When clicking a pagination number the .euiDataGridBody outline appears and we see a black border on top of the pagination.
This is occuring in Chrome, Firefox, and Safari - Safari just makes it more obvious because of its black outline.
Repro steps
Problem
This issue occurs due to the aria-controls property on our pagination component:
|
<div className="euiDataGrid__pagination"> |
|
<EuiTablePagination |
|
aria-controls={controls} |
Which, in our pagination component, we have some extra code that attempts to focus back onto the passed element, in this case our data grid:
|
if (ariaControls) { |
|
const controlledElement = document.getElementById(ariaControls); |
|
|
|
if (controlledElement) { |
|
controlledElement.focus(); |
|
} |
|
} |
However, our data grid body has conditional tabIndex/onFocus logic which pagination does not know about:
|
const focusProps = useMemo<FocusProps>( |
|
() => |
|
isFocusedCellInView |
|
? { |
|
// FireFox allows tabbing to a div that is scrollable, while Chrome does not |
|
tabIndex: -1, |
|
} |
|
: { |
|
tabIndex: 0, |
|
onFocus: (e) => { |
Solution
The solution here is to fire a manual setFocusedCell() API call onChangePage (which incidentally now also takes care of scrolling back upwards in the grid) instead of relying on aria-controls to focus onto the grid, due to our grid's complex focus behaivor.
Caught by @miukimiu in #5561 (review):
This is occuring in Chrome, Firefox, and Safari - Safari just makes it more obvious because of its black outline.
Repro steps
Problem
This issue occurs due to the
aria-controlsproperty on our pagination component:eui/src/components/datagrid/utils/data_grid_pagination.tsx
Lines 61 to 63 in dff7a77
Which, in our pagination component, we have some extra code that attempts to focus back onto the passed element, in this case our data grid:
eui/src/components/pagination/pagination.tsx
Lines 84 to 90 in c25a2c2
However, our data grid body has conditional
tabIndex/onFocuslogic which pagination does not know about:eui/src/components/datagrid/utils/focus.ts
Lines 108 to 117 in ca4435a
Solution
The solution here is to fire a manual
setFocusedCell()API callonChangePage(which incidentally now also takes care of scrolling back upwards in the grid) instead of relying onaria-controlsto focus onto the grid, due to our grid's complex focus behaivor.