Modern Event System: register onMouseEnter for portals (facebook#18720)

Author: trueadm

packages/react-art/src/ReactARTHostConfig.js

@@ -500,3 +500,7 @@ export function beforeActiveInstanceBlur() {
 export function afterActiveInstanceBlur() {
   // noop
 }
+
+export function preparePortalMount(portalInstance: any): void {
+  // noop
+}

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -64,8 +64,10 @@ import {
   enableSuspenseServerRenderer,
   enableDeprecatedFlareAPI,
   enableFundamentalAPI,
+  enableModernEventSystem,
 } from 'shared/ReactFeatureFlags';
 import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '../events/DOMTopLevelEventTypes';
+import {listenToEvent} from '../events/DOMModernPluginEventSystem';
 
 export type Type = string;
 export type Props = {
@@ -1098,3 +1100,9 @@ export function makeOpaqueHydratingObject(
     valueOf: attemptToReadValue,
   };
 }
+
+export function preparePortalMount(portalInstance: Instance): void {
+  if (enableModernEventSystem) {
+    listenToEvent('onMouseEnter', portalInstance);
+  }
+}

packages/react-dom/src/events/plugins/__tests__/ModernEnterLeaveEventPlugin-test.internal.js

@@ -239,4 +239,30 @@ describe('EnterLeaveEventPlugin', () => {
 
     ReactDOM.render(<Parent />, container);
   });
+
+  it('should work with portals outside of the root', () => {
+    const divRef = React.createRef();
+    const onMouseLeave = jest.fn();
+
+    function Component() {
+      return (
+        <div onMouseLeave={onMouseLeave}>
+          {ReactDOM.createPortal(<div ref={divRef} />, document.body)}
+        </div>
+      );
+    }
+
+    ReactDOM.render(<Component />, container);
+
+    // Leave from the portal div
+    divRef.current.dispatchEvent(
+      new MouseEvent('mouseout', {
+        bubbles: true,
+        cancelable: true,
+        relatedTarget: document.body,
+      }),
+    );
+
+    expect(onMouseLeave).toHaveBeenCalledTimes(1);
+  });
 });

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -514,3 +514,7 @@ export function beforeActiveInstanceBlur() {
 export function afterActiveInstanceBlur() {
   // noop
 }
+
+export function preparePortalMount(portalInstance: Instance): void {
+  // noop
+}

packages/react-native-renderer/src/ReactNativeHostConfig.js

@@ -562,3 +562,7 @@ export function beforeActiveInstanceBlur() {
 export function afterActiveInstanceBlur() {
   // noop
 }
+
+export function preparePortalMount(portalInstance: Instance): void {
+  // noop
+}

packages/react-noop-renderer/src/createReactNoop.js

@@ -449,6 +449,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     afterActiveInstanceBlur() {
       // NO-OP
     },
+
+    preparePortalMount() {
+      // NO-OP
+    },
   };
 
   const hostConfig = useMutation

packages/react-reconciler/src/ReactFiberCompleteWork.new.js

@@ -82,6 +82,7 @@ import {
   mountFundamentalComponent,
   cloneFundamentalInstance,
   shouldUpdateFundamentalComponent,
+  preparePortalMount,
 } from './ReactFiberHostConfig';
 import {
   getRootHostContainer,
@@ -973,6 +974,9 @@ function completeWork(
     case HostPortal:
       popHostContainer(workInProgress);
       updateHostContainer(workInProgress);
+      if (current === null) {
+        preparePortalMount(workInProgress.stateNode.containerInfo);
+      }
       return null;
     case ContextProvider:
       // Pop provider fiber

packages/react-reconciler/src/ReactFiberCompleteWork.old.js

@@ -82,6 +82,7 @@ import {
   mountFundamentalComponent,
   cloneFundamentalInstance,
   shouldUpdateFundamentalComponent,
+  preparePortalMount,
 } from './ReactFiberHostConfig';
 import {
   getRootHostContainer,
@@ -973,6 +974,9 @@ function completeWork(
     case HostPortal:
       popHostContainer(workInProgress);
       updateHostContainer(workInProgress);
+      if (current === null) {
+        preparePortalMount(workInProgress.stateNode.containerInfo);
+      }
       return null;
     case ContextProvider:
       // Pop provider fiber

packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js

@@ -83,6 +83,7 @@ export const makeClientIdInDEV = $$$hostConfig.makeClientIdInDEV;
 export const makeServerId = $$$hostConfig.makeServerId;
 export const beforeActiveInstanceBlur = $$$hostConfig.beforeActiveInstanceBlur;
 export const afterActiveInstanceBlur = $$$hostConfig.afterActiveInstanceBlur;
+export const preparePortalMount = $$$hostConfig.preparePortalMount;
 
 // -------------------
 //      Mutation

packages/react-test-renderer/src/ReactTestHostConfig.js

@@ -435,3 +435,7 @@ export function beforeActiveInstanceBlur() {
 export function afterActiveInstanceBlur() {
   // noop
 }
+
+export function preparePortalMount(portalInstance: Instance): void {
+  // noop
+}