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}