From 96d3b50971018a3c9ab427c4f6404b4105a962ff Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 2 Sep 2021 14:20:32 -0600
Subject: [PATCH] [EuiDataGrid] Remove cell actions onmouseleave (#5120)

* Remove datagrid cell actions onmouseleave

* changelog
---
 CHANGELOG.md                                    | 1 +
 src/components/datagrid/body/data_grid_cell.tsx | 3 +++
 src/components/datagrid/data_grid.test.tsx      | 4 ++++
 3 files changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 89c30331693..b9e29ad6205 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed `EuiScreenReaderOnly` positioning issues within scrolling containers ([#5130](https://github.com/elastic/eui/pull/5130))
+- Fixed `EuiDataGrid` cell actions not unmounting from the DOM after mouse interaction ([#5120](https://github.com/elastic/eui/pull/5120))
 
 ## [`37.6.0`](https://github.com/elastic/eui/tree/v37.6.0)
 
diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
index 49429bc985c..12c7a8ff601 100644
--- a/src/components/datagrid/body/data_grid_cell.tsx
+++ b/src/components/datagrid/body/data_grid_cell.tsx
@@ -537,6 +537,9 @@ export class EuiDataGridCell extends Component<
         onMouseEnter={() => {
           this.setState({ enableInteractions: true });
         }}
+        onMouseLeave={() => {
+          this.setState({ enableInteractions: false });
+        }}
         onBlur={this.onBlur}
       >
         {innerContent}
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index 6d79eaac909..82b5704842a 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -566,6 +566,7 @@ describe('EuiDataGrid', () => {
             "onFocus": [Function],
             "onKeyDown": [Function],
             "onMouseEnter": [Function],
+            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "red",
@@ -584,6 +585,7 @@ describe('EuiDataGrid', () => {
             "onFocus": [Function],
             "onKeyDown": [Function],
             "onMouseEnter": [Function],
+            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "blue",
@@ -602,6 +604,7 @@ describe('EuiDataGrid', () => {
             "onFocus": [Function],
             "onKeyDown": [Function],
             "onMouseEnter": [Function],
+            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "red",
@@ -620,6 +623,7 @@ describe('EuiDataGrid', () => {
             "onFocus": [Function],
             "onKeyDown": [Function],
             "onMouseEnter": [Function],
+            "onMouseLeave": [Function],
             "role": "gridcell",
             "style": Object {
               "color": "blue",