From 49a1d124c30567569e93f882621e19eae9fc6593 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 23 Nov 2023 13:07:52 -0800
Subject: [PATCH] [misc UI/UX fix] Prevent cell animation flash for keyboard
 users

- 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
---
 src/components/datagrid/_data_grid_data_row.scss     |  6 ++++--
 .../datagrid/body/data_grid_cell_popover.tsx         | 12 ++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index f3287fd86f5..93ea8d1bcb5 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -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;
@@ -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;
     }
diff --git a/src/components/datagrid/body/data_grid_cell_popover.tsx b/src/components/datagrid/body/data_grid_cell_popover.tsx
index 5deee06719d..66df03f09d4 100644
--- a/src/components/datagrid/body/data_grid_cell_popover.tsx
+++ b/src/components/datagrid/body/data_grid_cell_popover.tsx
@@ -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}