Skip to content

Commit

Permalink
[misc UI/UX fix] Prevent cell animation flash for keyboard users
Browse files Browse the repository at this point in the history
- Escape key was causing a flash of animation if the mouse was not already hovered over the cell - this prevents it

- DOM traversal is starting to feel pretty shaky, but not totally sure what to do about that
  • Loading branch information
cee-chen committed Nov 23, 2023
1 parent 9f59e72 commit 49a1d12
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 4 deletions.
6 changes: 4 additions & 2 deletions src/components/datagrid/_data_grid_data_row.scss
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,9 @@
&:focus,
&:focus-within,
// Always make the cell actions visible when the cell popover is open
&.euiDataGridRowCell--open {
&.euiDataGridRowCell--open,
// Prevents the animation from replaying when keyboard focus is moved from the popover back to the cell
&[data-keyboard-closing] {
.euiDataGridRowCell__actions {
animation-duration: $euiAnimSpeedExtraFast;
animation-name: euiDataGridCellActionsSlideIn;
Expand All @@ -67,7 +69,7 @@
}

// if a cell is not hovered nor focused nor open via popover, don't show buttons in general
&:not(:hover):not(:focus):not(.euiDataGridRowCell--open) {
&:not(:hover):not(:focus):not(.euiDataGridRowCell--open):not([data-keyboard-closing]) {
.euiDataGridRowCell__actions {
display: none;
}
Expand Down
12 changes: 10 additions & 2 deletions src/components/datagrid/body/data_grid_cell_popover.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,16 @@ export const useCellPopover = (): {
event.preventDefault();
event.stopPropagation();
closeCellPopover();
// Ensure focus is returned to the parent cell
requestAnimationFrame(() => popoverAnchor.parentElement!.focus());
const cell =
popoverAnchor.parentElement?.parentElement?.parentElement;

// Prevent cell animation flash while focus is being shifted between popover and cell
cell?.setAttribute('data-keyboard-closing', 'true');
// Ensure focus is returned to the parent cell, and remove animation stopgap
requestAnimationFrame(() => {
popoverAnchor.parentElement!.focus();
cell?.removeAttribute('data-keyboard-closing');
});
}
}}
button={popoverAnchor}
Expand Down

0 comments on commit 49a1d12

Please sign in to comment.