Modern Event System: fix EnterLeave plugin logic (facebook#18830)

trueadm · web-flow · commit 823dc581fea8 · 2020-05-05T22:10:07.000+01:00
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -269,7 +269,7 @@ if (__DEV__) {
   };
 }
 
-function ensureListeningTo(
+export function ensureListeningTo(
   rootContainerInstance: Element | Node,
   registrationName: string,
 ): void {
@@ -280,7 +280,7 @@ function ensureListeningTo(
       rootContainerInstance.nodeType === COMMENT_NODE
         ? rootContainerInstance.parentNode
         : rootContainerInstance;
-    // Containers can only ever be element nodes. We do not
+    // Containers should only ever be element nodes. We do not
     // want to register events to document fragments or documents
     // with the modern plugin event system.
     invariant(
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -42,6 +42,7 @@ import {
   DOCUMENT_NODE,
   DOCUMENT_FRAGMENT_NODE,
 } from '../shared/HTMLNodeType';
+import {ensureListeningTo} from './ReactDOMComponent';
 
 import {
   createContainer,
@@ -54,6 +55,8 @@ import {
   LegacyRoot,
 } from 'react-reconciler/src/ReactRootTags';
 
+import {enableModernEventSystem} from 'shared/ReactFeatureFlags';
+
 function ReactDOMRoot(container: Container, options: void | RootOptions) {
   this._internalRoot = createRootImpl(container, ConcurrentRoot, options);
 }
@@ -123,12 +126,22 @@ function createRootImpl(
     (options != null && options.hydrationOptions) || null;
   const root = createContainer(container, tag, hydrate, hydrationCallbacks);
   markContainerAsRoot(root.current, container);
+  const containerNodeType = container.nodeType;
+
   if (hydrate && tag !== LegacyRoot) {
     const doc =
-      container.nodeType === DOCUMENT_NODE
-        ? container
-        : container.ownerDocument;
-    eagerlyTrapReplayableEvents(container, doc);
+      containerNodeType === DOCUMENT_NODE ? container : container.ownerDocument;
+    // We need to cast this because Flow doesn't work
+    // with the hoisted containerNodeType. If we inline
+    // it, then Flow doesn't complain. We intentionally
+    // hoist it to reduce code-size.
+    eagerlyTrapReplayableEvents(container, ((doc: any): Document));
+  } else if (
+    enableModernEventSystem &&
+    containerNodeType !== DOCUMENT_FRAGMENT_NODE &&
+    containerNodeType !== DOCUMENT_NODE
+  ) {
+    ensureListeningTo(container, 'onMouseEnter');
   }
   return root;
 }
diff --git a/packages/react-dom/src/events/DOMModernPluginEventSystem.js b/packages/react-dom/src/events/DOMModernPluginEventSystem.js
@@ -677,7 +677,7 @@ function accumulateEnterLeaveListenersForEvent(
 export function accumulateEnterLeaveListeners(
   dispatchQueue: DispatchQueue,
   leaveEvent: ReactSyntheticEvent,
-  enterEvent: ReactSyntheticEvent,
+  enterEvent: null | ReactSyntheticEvent,
   from: Fiber | null,
   to: Fiber | null,
 ): void {
@@ -692,7 +692,7 @@ export function accumulateEnterLeaveListeners(
       false,
     );
   }
-  if (to !== null) {
+  if (to !== null && enterEvent !== null) {
     accumulateEnterLeaveListenersForEvent(
       dispatchQueue,
       enterEvent,
diff --git a/packages/react-dom/src/events/plugins/ModernEnterLeaveEventPlugin.js b/packages/react-dom/src/events/plugins/ModernEnterLeaveEventPlugin.js
@@ -65,18 +65,16 @@ const EnterLeaveEventPlugin = {
       topLevelType === TOP_MOUSE_OVER || topLevelType === TOP_POINTER_OVER;
     const isOutEvent =
       topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_POINTER_OUT;
-
-    if (isOverEvent && (eventSystemFlags & IS_REPLAYED) === 0) {
-      const related = nativeEvent.relatedTarget || nativeEvent.fromElement;
-      if (related) {
-        // Due to the fact we don't add listeners to the document with the
-        // modern event system and instead attach listeners to roots, we
-        // need to handle the over event case. To ensure this, we just need to
-        // make sure the node that we're coming from is managed by React.
-        const inst = getClosestInstanceFromNode(related);
-        if (inst !== null) {
-          return;
-        }
+    const related = nativeEvent.relatedTarget || nativeEvent.fromElement;
+
+    if (isOverEvent && (eventSystemFlags & IS_REPLAYED) === 0 && related) {
+      // Due to the fact we don't add listeners to the document with the
+      // modern event system and instead attach listeners to roots, we
+      // need to handle the over event case. To ensure this, we just need to
+      // make sure the node that we're coming from is managed by React.
+      const inst = getClosestInstanceFromNode(related);
+      if (inst !== null) {
+        return;
       }
     }
 
@@ -103,7 +101,6 @@ const EnterLeaveEventPlugin = {
     let to;
     if (isOutEvent) {
       from = targetInst;
-      const related = nativeEvent.relatedTarget || nativeEvent.toElement;
       to = related ? getClosestInstanceFromNode(related) : null;
       if (to !== null) {
         const nearestMounted = getNearestMountedFiber(to);
@@ -155,7 +152,7 @@ const EnterLeaveEventPlugin = {
     leave.target = fromNode;
     leave.relatedTarget = toNode;
 
-    const enter = eventInterface.getPooled(
+    let enter = eventInterface.getPooled(
       enterEventType,
       to,
       nativeEvent,
@@ -165,6 +162,14 @@ const EnterLeaveEventPlugin = {
     enter.target = toNode;
     enter.relatedTarget = fromNode;
 
+    // If we are not processing the first ancestor, then we
+    // should not process the same nativeEvent again, as we
+    // will have already processed it in the first ancestor.
+    const nativeTargetInst = getClosestInstanceFromNode(nativeEventTarget);
+    if (nativeTargetInst !== targetInst) {
+      enter = null;
+    }
+
     accumulateEnterLeaveListeners(dispatchQueue, leave, enter, from, to);
   },
 };
diff --git a/packages/react-dom/src/events/plugins/__tests__/ModernEnterLeaveEventPlugin-test.internal.js b/packages/react-dom/src/events/plugins/__tests__/ModernEnterLeaveEventPlugin-test.internal.js
@@ -240,7 +240,7 @@ describe('EnterLeaveEventPlugin', () => {
     ReactDOM.render(<Parent />, container);
   });
 
-  it('should work with portals outside of the root', () => {
+  it('should work with portals outside of the root that has onMouseLeave', () => {
     const divRef = React.createRef();
     const onMouseLeave = jest.fn();
 
@@ -265,4 +265,34 @@ describe('EnterLeaveEventPlugin', () => {
 
     expect(onMouseLeave).toHaveBeenCalledTimes(1);
   });
+
+  it('should work with portals that have onMouseEnter outside of the root ', () => {
+    const divRef = React.createRef();
+    const otherDivRef = React.createRef();
+    const onMouseEnter = jest.fn();
+
+    function Component() {
+      return (
+        <div ref={divRef}>
+          {ReactDOM.createPortal(
+            <div ref={otherDivRef} onMouseEnter={onMouseEnter} />,
+            document.body,
+          )}
+        </div>
+      );
+    }
+
+    ReactDOM.render(<Component />, container);
+
+    // Leave from the portal div
+    divRef.current.dispatchEvent(
+      new MouseEvent('mouseout', {
+        bubbles: true,
+        cancelable: true,
+        relatedTarget: otherDivRef.current,
+      }),
+    );
+
+    expect(onMouseEnter).toHaveBeenCalledTimes(1);
+  });
 });
