diff --git a/fixtures/dom/src/components/fixtures/mouse-events/index.js b/fixtures/dom/src/components/fixtures/mouse-events/index.js index 4f3e8967d2418..e72920c9abab2 100644 --- a/fixtures/dom/src/components/fixtures/mouse-events/index.js +++ b/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}) => ( -
+const Rectangle = ({style, nodeRef, ...props}) => ( + ); +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 {+ Moving from the outer rectangle to the inner blue Portal should not trigger a + mouseleave on the outer rectangle. +
+diff --git a/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js b/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js index 4a4fdbe808ffb..4e1a75b51623a 100644 --- a/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js +++ b/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js @@ -859,16 +859,10 @@ 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, {}); } } @@ -876,8 +870,9 @@ describe('ReactDOMFiber', () => {ops.push('enter parent')} - onMouseLeave={() => ops.push('leave parent')}> -(firstTarget = n)} /> + onMouseLeave={() => ops.push('leave parent')} + ref={n => (firstTarget = n)}> + {ReactDOM.unstable_createPortal(ops.push('enter portal')} diff --git a/src/renderers/dom/shared/eventPlugins/SimpleEventPlugin.js b/src/renderers/dom/shared/eventPlugins/SimpleEventPlugin.js index 2b46446933a67..4effc443ce67b 100644 --- a/src/renderers/dom/shared/eventPlugins/SimpleEventPlugin.js +++ b/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) {