From 26ba38ae4b65375b97b561ec2d6a58ef597647ed Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 3 Oct 2019 23:35:09 +0200
Subject: [PATCH] [EnterLeaveEventPlugin] Fix bug when dealing with unhandled
 DOM nodes (#17006)

---
 .../src/events/EnterLeaveEventPlugin.js       | 10 +++-
 .../__tests__/EnterLeaveEventPlugin-test.js   | 51 +++++++++++++++++++
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/events/EnterLeaveEventPlugin.js b/packages/react-dom/src/events/EnterLeaveEventPlugin.js
index f8c8d279db005..300772410c603 100644
--- a/packages/react-dom/src/events/EnterLeaveEventPlugin.js
+++ b/packages/react-dom/src/events/EnterLeaveEventPlugin.js
@@ -42,6 +42,12 @@ const eventTypes = {
   },
 };
 
+// We track the lastNativeEvent to ensure that when we encounter
+// cases where we process the same nativeEvent multiple times,
+// which can happen when have multiple ancestors, that we don't
+// duplicate enter
+let lastNativeEvent;
+
 const EnterLeaveEventPlugin = {
   eventTypes: eventTypes,
 
@@ -163,9 +169,11 @@ const EnterLeaveEventPlugin = {
 
     accumulateEnterLeaveDispatches(leave, enter, from, to);
 
-    if (isOutEvent && from && nativeEventTarget !== fromNode) {
+    if (nativeEvent === lastNativeEvent) {
+      lastNativeEvent = null;
       return [leave];
     }
+    lastNativeEvent = nativeEvent;
 
     return [leave, enter];
   },
diff --git a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js
index b8bda1c67fe9f..e91eb737914cc 100644
--- a/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js
+++ b/packages/react-dom/src/events/__tests__/EnterLeaveEventPlugin-test.js
@@ -185,4 +185,55 @@ describe('EnterLeaveEventPlugin', () => {
 
     ReactDOM.render(<Parent />, container);
   });
+
+  it('should call mouseEnter when pressing a non tracked React node', done => {
+    const mockFn = jest.fn();
+
+    class Parent extends React.Component {
+      constructor(props) {
+        super(props);
+        this.parentEl = React.createRef();
+      }
+
+      componentDidMount() {
+        ReactDOM.render(<MouseEnterDetect />, this.parentEl.current);
+      }
+
+      render() {
+        return <div ref={this.parentEl} />;
+      }
+    }
+
+    class MouseEnterDetect extends React.Component {
+      constructor(props) {
+        super(props);
+        this.divRef = React.createRef();
+        this.siblingEl = React.createRef();
+      }
+
+      componentDidMount() {
+        const attachedNode = document.createElement('div');
+        this.divRef.current.appendChild(attachedNode);
+        attachedNode.dispatchEvent(
+          new MouseEvent('mouseout', {
+            bubbles: true,
+            cancelable: true,
+            relatedTarget: this.siblingEl.current,
+          }),
+        );
+        expect(mockFn.mock.calls.length).toBe(1);
+        done();
+      }
+
+      render() {
+        return (
+          <div ref={this.divRef}>
+            <div ref={this.siblingEl} onMouseEnter={mockFn} />
+          </div>
+        );
+      }
+    }
+
+    ReactDOM.render(<Parent />, container);
+  });
 });