Add Portal fixture

Author: jquense

fixtures/dom/src/components/fixtures/mouse-events/index.js

@@ -1,11 +1,20 @@
 const React = window.React;
+const ReactDOM = window.ReactDOM;
 
-const Rectangle = ({style, ...props}) => (
-  <div {...props} style={{border: '1px solid black', padding: 40, ...style}} />
+const Rectangle = ({style, nodeRef, ...props}) => (
+  <div
+    {...props}
+    ref={nodeRef}
+    style={{border: '1px solid black', padding: 40, ...style}}
+  />
 );
 
+var portalContainer = document.createElement('div');
+document.body.appendChild(portalContainer)
+
+
 class MouseEventsFixtures extends React.Component {
-  state = {log: []};
+  state = {log: [], box: null };
 
   log = msg => {
     this.setState(({log}) => ({
@@ -15,7 +24,28 @@ class MouseEventsFixtures extends React.Component {
   clearLog = () => {
     this.setState({log: []});
   };
+
+  componentDidMount() {
+    this.getDimensions()
+  }
+  componentDidUpdate() {
+    this.getDimensions()
+  }
+
+  getDimensions() {
+    if (!this.state.box && this.node) {
+      const { left, bottom } = this.node.getBoundingClientRect()
+      this.setState({
+        box: { left: left + 10, top: bottom - 10 },
+      })
+    } else if (this.state.box && !this.node) {
+      this.setState({ box: null })
+    }
+  }
+
   render() {
+    const { box } = this.state;
+
     let getLogger = prefix => e => this.log(`${prefix}: ${e.type}`);
     let outerLogger = getLogger('outer');
     let innerLogger = getLogger('inner');
@@ -35,8 +65,31 @@ class MouseEventsFixtures extends React.Component {
           <Rectangle onMouseEnter={outerLogger} onMouseLeave={outerLogger}>
             <Rectangle onMouseEnter={innerLogger} onMouseLeave={innerLogger} />
           </Rectangle>
+
+          <p>
+            Moving from the outer rectangle to the inner blue Portal should not trigger a
+            mouseleave on the outer rectangle.
+          </p>
+          <Rectangle
+            onMouseEnter={outerLogger}
+            onMouseLeave={outerLogger}
+            nodeRef={n => this.node = n}
+          >
+
+            {ReactDOM.unstable_createPortal(
+              <div
+                style={{ position: 'fixed', border: '1px solid blue', padding: 10, ...box }}
+                onMouseEnter={innerLogger}
+                onMouseLeave={innerLogger}
+              >
+                portal
+              </div>,
+              portalContainer,
+            )}
+          </Rectangle>
         </div>
 
+
         <div className="container">
           <h4>Console: <button onClick={this.clearLog}>clear</button></h4>
           <pre className="output">

src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js

@@ -859,25 +859,20 @@ describe('ReactDOMFiber', () => {
 
       function simulateMouseMove(from, to) {
         if (from) {
-          ReactTestUtils.simulateNativeEventOnNode('topMouseOut', from, {
-            target: from,
-            relatedTarget: to,
-          });
+          ReactTestUtils.simulateNativeEventOnNode('topMouseLeave', from, {});
         }
         if (to) {
-          ReactTestUtils.simulateNativeEventOnNode('topMouseOver', to, {
-            target: to,
-            relatedTarget: from,
-          });
+          ReactTestUtils.simulateNativeEventOnNode('topMouseEnter', to, {});
         }
       }
 
       ReactDOM.render(
         <div>
           <div
             onMouseEnter={() => ops.push('enter parent')}
-            onMouseLeave={() => ops.push('leave parent')}>
-            <div ref={n => (firstTarget = n)} />
+            onMouseLeave={() => ops.push('leave parent')}
+            ref={n => (firstTarget = n)}>
+
             {ReactDOM.unstable_createPortal(
               <div
                 onMouseEnter={() => ops.push('enter portal')}

src/renderers/dom/shared/eventPlugins/SimpleEventPlugin.js

@@ -137,6 +137,8 @@ var topLevelEventsToDispatchConfig: {[key: TopLevelTypes]: DispatchConfig} = {};
 
   var type = {
     dependencies: [topEvent],
+    phasedRegistrationNames: null,
+    registrationName: null,
   };
 
   if (isPhased) {