{"files":[{"path":"packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/__tests__\/DOMModernPluginEventSystem-test.internal.js","status":"M"}],"patch":"diff --git a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\nindex 32c56b15c6..daea82b498 100644\n--- a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n@@ -19,6 +19,8 @@ import {batchedEventUpdates} from 'legacy-events\/ReactGenericBatching';\n import {executeDispatchesInOrder} from 'legacy-events\/EventPluginUtils';\n import {plugins} from 'legacy-events\/EventPluginRegistry';\n \n+import {HostRoot, HostPortal} from 'shared\/ReactWorkTags';\n+\n import {trapEventForPluginEventSystem} from '.\/ReactDOMEventListener';\n import getEventTarget from '.\/getEventTarget';\n import {getListenerMapForElement} from '.\/DOMEventListenerMap';\n@@ -56,7 +58,8 @@ import {\n TOP_PROGRESS,\n TOP_PLAYING,\n } from '.\/DOMTopLevelEventTypes';\n-import {DOCUMENT_NODE} from '..\/shared\/HTMLNodeType';\n+import {getClosestInstanceFromNode} from '..\/client\/ReactDOMComponentTree';\n+import {DOCUMENT_NODE, COMMENT_NODE} from '..\/shared\/HTMLNodeType';\n \n import {enableLegacyFBPrimerSupport} from 'shared\/ReactFeatureFlags';\n \n@@ -206,6 +209,17 @@ function willDeferLaterForFBLegacyPrimer(nativeEvent: any): boolean {\n return false;\n }\n \n+function isMatchingRootContainer(\n+ grandContainer: Element,\n+ rootContainer: Document | Element,\n+): boolean {\n+ return (\n+ grandContainer === rootContainer ||\n+ (grandContainer.nodeType === COMMENT_NODE &&\n+ grandContainer.parentNode === rootContainer)\n+ );\n+}\n+\n export function dispatchEventForPluginEventSystem(\n topLevelType: DOMTopLevelEventType,\n eventSystemFlags: EventSystemFlags,\n@@ -224,6 +238,56 @@ export function dispatchEventForPluginEventSystem(\n ) {\n return;\n }\n+ \/\/ The below logic attempts to work out if we need to change\n+ \/\/ the target fiber to a different ancestor. We had similar logic\n+ \/\/ in the legacy event system, except the big difference between\n+ \/\/ systems is that the modern event system now has an event listener\n+ \/\/ attached to each React Root and React Portal Root. Together,\n+ \/\/ the DOM nodes representing these roots are the \"rootContainer\".\n+ \/\/ To figure out which ancestor instance we should use, we traverse\n+ \/\/ up the fiber tree from the target instance and attempt to find\n+ \/\/ root boundaries that match that of our current \"rootContainer\".\n+ \/\/ If we find that \"rootContainer\", we find the parent fiber\n+ \/\/ sub-tree for that root and make that our ancestor instance.\n+ let node = targetInst;\n+\n+ while (true) {\n+ if (node === null) {\n+ return;\n+ }\n+ if (node.tag === HostRoot || node.tag === HostPortal) {\n+ const container = node.stateNode.containerInfo;\n+ if (isMatchingRootContainer(container, rootContainer)) {\n+ break;\n+ }\n+ if (node.tag === HostPortal) {\n+ \/\/ The target is a portal, but it's not the rootContainer we're looking for.\n+ \/\/ Normally portals handle their own events all the way down to the root.\n+ \/\/ So we should be able to stop now. However, we don't know if this portal\n+ \/\/ was part of *our* root.\n+ let grandNode = node.return;\n+ while (grandNode !== null) {\n+ if (grandNode.tag === HostRoot || grandNode.tag === HostPortal) {\n+ const grandContainer = grandNode.stateNode.containerInfo;\n+ if (isMatchingRootContainer(grandContainer, rootContainer)) {\n+ \/\/ This is the rootContainer we're looking for and we found it as\n+ \/\/ a parent of the Portal. That means we can ignore it because the\n+ \/\/ Portal will bubble through to us.\n+ return;\n+ }\n+ }\n+ grandNode = grandNode.return;\n+ }\n+ }\n+ const parentSubtreeInst = getClosestInstanceFromNode(container);\n+ if (parentSubtreeInst === null) {\n+ return;\n+ }\n+ node = ancestorInst = parentSubtreeInst;\n+ continue;\n+ }\n+ node = node.return;\n+ }\n }\n \n batchedEventUpdates(() =>\ndiff --git a\/packages\/react-dom\/src\/events\/__tests__\/DOMModernPluginEventSystem-test.internal.js b\/packages\/react-dom\/src\/events\/__tests__\/DOMModernPluginEventSystem-test.internal.js\nindex 009b74ef69..31ab9e26d5 100644\n--- a\/packages\/react-dom\/src\/events\/__tests__\/DOMModernPluginEventSystem-test.internal.js\n+++ b\/packages\/react-dom\/src\/events\/__tests__\/DOMModernPluginEventSystem-test.internal.js\n@@ -12,6 +12,8 @@\n let React;\n let ReactFeatureFlags;\n let ReactDOM;\n+let ReactDOMServer;\n+let Scheduler;\n \n function dispatchClickEvent(element) {\n const event = document.createEvent('Event');\n@@ -29,6 +31,8 @@ describe('DOMModernPluginEventSystem', () => {\n \n React = require('react');\n ReactDOM = require('react-dom');\n+ Scheduler = require('scheduler');\n+ ReactDOMServer = require('react-dom\/server');\n container = document.createElement('div');\n document.body.appendChild(container);\n });\n@@ -77,6 +81,500 @@ describe('DOMModernPluginEventSystem', () => {\n expect(log[5]).toEqual(['bubble', buttonElement]);\n });\n \n+ it('handle propagation of click events between roots', () => {\n+ const buttonRef = React.createRef();\n+ const divRef = React.createRef();\n+ const childRef = React.createRef();\n+ const log = [];\n+ const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));\n+ const onClickCapture = jest.fn(e => log.push(['capture', e.currentTarget]));\n+\n+ function Child() {\n+ return (\n+

\n+ Click me!\n+ <\/div>\n+ );\n+ }\n+\n+ function Parent() {\n+ return (\n+ \n+

\n+ <\/button>\n+ );\n+ }\n+\n+ ReactDOM.render(, container);\n+ ReactDOM.render(, childRef.current);\n+\n+ let buttonElement = buttonRef.current;\n+ dispatchClickEvent(buttonElement);\n+ expect(onClick).toHaveBeenCalledTimes(1);\n+ expect(onClickCapture).toHaveBeenCalledTimes(1);\n+ expect(log[0]).toEqual(['capture', buttonElement]);\n+ expect(log[1]).toEqual(['bubble', buttonElement]);\n+\n+ let divElement = divRef.current;\n+ dispatchClickEvent(divElement);\n+ expect(onClick).toHaveBeenCalledTimes(3);\n+ expect(onClickCapture).toHaveBeenCalledTimes(3);\n+ expect(log[2]).toEqual(['capture', divElement]);\n+ expect(log[3]).toEqual(['bubble', divElement]);\n+ expect(log[4]).toEqual(['capture', buttonElement]);\n+ expect(log[5]).toEqual(['bubble', buttonElement]);\n+ });\n+\n+ it('handle propagation of click events between disjointed roots', () => {\n+ const buttonRef = React.createRef();\n+ const divRef = React.createRef();\n+ const log = [];\n+ const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));\n+ const onClickCapture = jest.fn(e => log.push(['capture', e.currentTarget]));\n+\n+ function Child() {\n+ return (\n+

\n+ Click me!\n+ <\/div>\n+ );\n+ }\n+\n+ function Parent() {\n+ return (\n+ \n+ );\n+ }\n+\n+ const disjointedNode = document.createElement('div');\n+ ReactDOM.render(, container);\n+ buttonRef.current.appendChild(disjointedNode);\n+ ReactDOM.render(, disjointedNode);\n+\n+ let buttonElement = buttonRef.current;\n+ dispatchClickEvent(buttonElement);\n+ expect(onClick).toHaveBeenCalledTimes(1);\n+ expect(onClickCapture).toHaveBeenCalledTimes(1);\n+ expect(log[0]).toEqual(['capture', buttonElement]);\n+ expect(log[1]).toEqual(['bubble', buttonElement]);\n+\n+ let divElement = divRef.current;\n+ dispatchClickEvent(divElement);\n+ expect(onClick).toHaveBeenCalledTimes(3);\n+ expect(onClickCapture).toHaveBeenCalledTimes(3);\n+ expect(log[2]).toEqual(['capture', divElement]);\n+ expect(log[3]).toEqual(['bubble', divElement]);\n+ expect(log[4]).toEqual(['capture', buttonElement]);\n+ expect(log[5]).toEqual(['bubble', buttonElement]);\n+ });\n+\n+ it('handle propagation of click events between disjointed comment roots', () => {\n+ const buttonRef = React.createRef();\n+ const divRef = React.createRef();\n+ const log = [];\n+ const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));\n+ const onClickCapture = jest.fn(e => log.push(['capture', e.currentTarget]));\n+\n+ function Child() {\n+ return (\n+

\n+ Click me!\n+ <\/div>\n+ );\n+ }\n+\n+ function Parent() {\n+ return (\n+ \n+ );\n+ }\n+\n+ \/\/ We use a comment node here, then mount to it\n+ const disjointedNode = document.createComment(\n+ ' react-mount-point-unstable ',\n+ );\n+ ReactDOM.render(, container);\n+ buttonRef.current.appendChild(disjointedNode);\n+ ReactDOM.render(, disjointedNode);\n+\n+ let buttonElement = buttonRef.current;\n+ dispatchClickEvent(buttonElement);\n+ expect(onClick).toHaveBeenCalledTimes(1);\n+ expect(onClickCapture).toHaveBeenCalledTimes(1);\n+ expect(log[0]).toEqual(['capture', buttonElement]);\n+ expect(log[1]).toEqual(['bubble', buttonElement]);\n+\n+ let divElement = divRef.current;\n+ dispatchClickEvent(divElement);\n+ expect(onClick).toHaveBeenCalledTimes(3);\n+ expect(onClickCapture).toHaveBeenCalledTimes(3);\n+ expect(log[2]).toEqual(['capture', divElement]);\n+ expect(log[3]).toEqual(['bubble', divElement]);\n+ expect(log[4]).toEqual(['capture', buttonElement]);\n+ expect(log[5]).toEqual(['bubble', buttonElement]);\n+ });\n+\n+ it('handle propagation of click events between disjointed comment roots #2', () => {\n+ const buttonRef = React.createRef();\n+ const divRef = React.createRef();\n+ const spanRef = React.createRef();\n+ const log = [];\n+ const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));\n+ const onClickCapture = jest.fn(e => log.push(['capture', e.currentTarget]));\n+\n+ function Child() {\n+ return (\n+

\n+ Click me!\n+ <\/div>\n+ );\n+ }\n+\n+ function Parent() {\n+ return (\n+ \n+ \n+ <\/button>\n+ );\n+ }\n+\n+ \/\/ We use a comment node here, then mount to it\n+ const disjointedNode = document.createComment(\n+ ' react-mount-point-unstable ',\n+ );\n+ ReactDOM.render(, container);\n+ spanRef.current.appendChild(disjointedNode);\n+ ReactDOM.render(, disjointedNode);\n+\n+ let buttonElement = buttonRef.current;\n+ dispatchClickEvent(buttonElement);\n+ expect(onClick).toHaveBeenCalledTimes(1);\n+ expect(onClickCapture).toHaveBeenCalledTimes(1);\n+ expect(log[0]).toEqual(['capture', buttonElement]);\n+ expect(log[1]).toEqual(['bubble', buttonElement]);\n+\n+ let divElement = divRef.current;\n+ dispatchClickEvent(divElement);\n+ expect(onClick).toHaveBeenCalledTimes(3);\n+ expect(onClickCapture).toHaveBeenCalledTimes(3);\n+ expect(log[2]).toEqual(['capture', divElement]);\n+ expect(log[3]).toEqual(['bubble', divElement]);\n+ expect(log[4]).toEqual(['capture', buttonElement]);\n+ expect(log[5]).toEqual(['bubble', buttonElement]);\n+ });\n+\n+ it('handle propagation of click events between portals', () => {\n+ const buttonRef = React.createRef();\n+ const divRef = React.createRef();\n+ const log = [];\n+ const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));\n+ const onClickCapture = jest.fn(e => log.push(['capture', e.currentTarget]));\n+\n+ const portalElement = document.createElement('div');\n+ document.body.appendChild(portalElement);\n+\n+ function Child() {\n+ return (\n+

\n+ Click me!\n+ <\/div>\n+ );\n+ }\n+\n+ function Parent() {\n+ return (\n+ \n+ {ReactDOM.createPortal(, portalElement)}\n+ <\/button>\n+ );\n+ }\n+\n+ ReactDOM.render(, container);\n+\n+ let buttonElement = buttonRef.current;\n+ dispatchClickEvent(buttonElement);\n+ expect(onClick).toHaveBeenCalledTimes(1);\n+ expect(onClickCapture).toHaveBeenCalledTimes(1);\n+ expect(log[0]).toEqual(['capture', buttonElement]);\n+ expect(log[1]).toEqual(['bubble', buttonElement]);\n+\n+ let divElement = divRef.current;\n+ dispatchClickEvent(divElement);\n+ expect(onClick).toHaveBeenCalledTimes(3);\n+ expect(onClickCapture).toHaveBeenCalledTimes(3);\n+ expect(log[2]).toEqual(['capture', buttonElement]);\n+ expect(log[3]).toEqual(['capture', divElement]);\n+ expect(log[4]).toEqual(['bubble', divElement]);\n+ expect(log[5]).toEqual(['bubble', buttonElement]);\n+\n+ document.body.removeChild(portalElement);\n+ });\n+\n+ it('handle click events on document.body portals', () => {\n+ const log = [];\n+\n+ function Child({label}) {\n+ return

log.push(label)}>{label}<\/div>;\n+ }\n+\n+ function Parent() {\n+ return (\n+ <>\n+ {ReactDOM.createPortal(, document.body)}\n+ {ReactDOM.createPortal(, document.body)}\n+ <\/>\n+ );\n+ }\n+\n+ ReactDOM.render(, container);\n+\n+ const second = document.body.lastChild;\n+ expect(second.textContent).toEqual('second');\n+ dispatchClickEvent(second);\n+\n+ expect(log).toEqual(['second']);\n+\n+ const first = second.previousSibling;\n+ expect(first.textContent).toEqual('first');\n+ dispatchClickEvent(first);\n+\n+ expect(log).toEqual(['second', 'first']);\n+ });\n+\n+ it.experimental(\n+ 'does not invoke an event on a parent tree when a subtree is dehydrated',\n+ async () => {\n+ let suspend = false;\n+ let resolve;\n+ let promise = new Promise(resolvePromise => (resolve = resolvePromise));\n+\n+ let clicks = 0;\n+ let childSlotRef = React.createRef();\n+\n+ function Parent() {\n+ return

clicks++} ref={childSlotRef} \/>;\n+ }\n+\n+ function Child({text}) {\n+ if (suspend) {\n+ throw promise;\n+ } else {\n+ return Click me<\/a>;\n+ }\n+ }\n+\n+ function App() {\n+ \/\/ The root is a Suspense boundary.\n+ return (\n+ \n+ \n+ <\/React.Suspense>\n+ );\n+ }\n+\n+ suspend = false;\n+ let finalHTML = ReactDOMServer.renderToString();\n+\n+ let parentContainer = document.createElement('div');\n+ let childContainer = document.createElement('div');\n+\n+ \/\/ We need this to be in the document since we'll dispatch events on it.\n+ document.body.appendChild(parentContainer);\n+\n+ \/\/ We're going to use a different root as a parent.\n+ \/\/ This lets us detect whether an event goes through React's event system.\n+ let parentRoot = ReactDOM.createRoot(parentContainer);\n+ parentRoot.render();\n+ Scheduler.unstable_flushAll();\n+\n+ childSlotRef.current.appendChild(childContainer);\n+\n+ childContainer.innerHTML = finalHTML;\n+\n+ let a = childContainer.getElementsByTagName('a')[0];\n+\n+ suspend = true;\n+\n+ \/\/ Hydrate asynchronously.\n+ let root = ReactDOM.createRoot(childContainer, {hydrate: true});\n+ root.render();\n+ jest.runAllTimers();\n+ Scheduler.unstable_flushAll();\n+\n+ \/\/ The Suspense boundary is not yet hydrated.\n+ a.click();\n+ expect(clicks).toBe(0);\n+\n+ \/\/ Resolving the promise so that rendering can complete.\n+ suspend = false;\n+ resolve();\n+ await promise;\n+\n+ Scheduler.unstable_flushAll();\n+ jest.runAllTimers();\n+\n+ \/\/ We're now full hydrated.\n+\n+ expect(clicks).toBe(1);\n+\n+ document.body.removeChild(parentContainer);\n+ },\n+ );\n+\n+ it('handle click events on dynamic portals', () => {\n+ const log = [];\n+\n+ function Parent() {\n+ const ref = React.useRef(null);\n+ const [portal, setPortal] = React.useState(null);\n+\n+ React.useEffect(() => {\n+ setPortal(\n+ ReactDOM.createPortal(\n+ log.push('child')} id=\"child\" \/>,\n+ ref.current,\n+ ),\n+ );\n+ });\n+\n+ return (\n+

log.push('parent')} id=\"parent\">\n+ {portal}\n+ <\/div>\n+ );\n+ }\n+\n+ ReactDOM.render(, container);\n+\n+ const parent = container.lastChild;\n+ expect(parent.id).toEqual('parent');\n+ dispatchClickEvent(parent);\n+\n+ expect(log).toEqual(['parent']);\n+\n+ const child = parent.lastChild;\n+ expect(child.id).toEqual('child');\n+ dispatchClickEvent(child);\n+\n+ \/\/ we add both 'child' and 'parent' due to bubbling\n+ expect(log).toEqual(['parent', 'child', 'parent']);\n+ });\n+\n+ \/\/ Slight alteration to the last test, to catch\n+ \/\/ a subtle difference in traversal.\n+ it('handle click events on dynamic portals #2', () => {\n+ const log = [];\n+\n+ function Parent() {\n+ const ref = React.useRef(null);\n+ const [portal, setPortal] = React.useState(null);\n+\n+ React.useEffect(() => {\n+ setPortal(\n+ ReactDOM.createPortal(\n+ log.push('child')} id=\"child\" \/>,\n+ ref.current,\n+ ),\n+ );\n+ });\n+\n+ return (\n+

log.push('parent')} id=\"parent\">\n+

{portal}<\/div>\n+ <\/div>\n+ );\n+ }\n+\n+ ReactDOM.render(, container);\n+\n+ const parent = container.lastChild;\n+ expect(parent.id).toEqual('parent');\n+ dispatchClickEvent(parent);\n+\n+ expect(log).toEqual(['parent']);\n+\n+ const child = parent.lastChild;\n+ expect(child.id).toEqual('child');\n+ dispatchClickEvent(child);\n+\n+ \/\/ we add both 'child' and 'parent' due to bubbling\n+ expect(log).toEqual(['parent', 'child', 'parent']);\n+ });\n+\n+ it('native stopPropagation on click events between portals', () => {\n+ const buttonRef = React.createRef();\n+ const divRef = React.createRef();\n+ const middelDivRef = React.createRef();\n+ const log = [];\n+ const onClick = jest.fn(e => log.push(['bubble', e.currentTarget]));\n+ const onClickCapture = jest.fn(e => log.push(['capture', e.currentTarget]));\n+\n+ const portalElement = document.createElement('div');\n+ document.body.appendChild(portalElement);\n+\n+ function Child() {\n+ return (\n+

\n+

\n+ Click me!\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+\n+ function Parent() {\n+ React.useLayoutEffect(() => {\n+ \/\/ This should prevent the portalElement listeners from\n+ \/\/ capturing the events in the bubble phase.\n+ middelDivRef.current.addEventListener('click', e => {\n+ e.stopPropagation();\n+ });\n+ });\n+\n+ return (\n+ \n+ {ReactDOM.createPortal(, portalElement)}\n+ <\/button>\n+ );\n+ }\n+\n+ ReactDOM.render(, container);\n+\n+ let buttonElement = buttonRef.current;\n+ dispatchClickEvent(buttonElement);\n+ expect(onClick).toHaveBeenCalledTimes(1);\n+ expect(onClickCapture).toHaveBeenCalledTimes(1);\n+ expect(log[0]).toEqual(['capture', buttonElement]);\n+ expect(log[1]).toEqual(['bubble', buttonElement]);\n+\n+ let divElement = divRef.current;\n+ dispatchClickEvent(divElement);\n+ expect(onClick).toHaveBeenCalledTimes(1);\n+ expect(onClickCapture).toHaveBeenCalledTimes(1);\n+\n+ document.body.removeChild(portalElement);\n+ });\n+\n it('handle propagation of focus events', () => {\n const buttonRef = React.createRef();\n const divRef = React.createRef();\n@@ -120,6 +618,377 @@ describe('DOMModernPluginEventSystem', () => {\n expect(log[5]).toEqual(['bubble', buttonElement]);\n });\n \n+ it('handle propagation of focus events between roots', () => {\n+ const buttonRef = React.createRef();\n+ const divRef = React.createRef();\n+ const childRef = React.createRef();\n+ const log = [];\n+ const onFocus = jest.fn(e => log.push(['bubble', e.currentTarget]));\n+ const onFocusCapture = jest.fn(e => log.push(['capture', e.currentTarget]));\n+\n+ function Child() {\n+ return (\n+ \n+ Click me!\n+ <\/div>\n+ );\n+ }\n+\n+ function Parent() {\n+ return (\n+ \n+

\n+ <\/button>\n+ );\n+ }\n+\n+ ReactDOM.render(, container);\n+ ReactDOM.render(, childRef.current);\n+\n+ let buttonElement = buttonRef.current;\n+ buttonElement.focus();\n+ expect(onFocus).toHaveBeenCalledTimes(1);\n+ expect(onFocusCapture).toHaveBeenCalledTimes(1);\n+ expect(log[0]).toEqual(['capture', buttonElement]);\n+ expect(log[1]).toEqual(['bubble', buttonElement]);\n+\n+ let divElement = divRef.current;\n+ divElement.focus();\n+ expect(onFocus).toHaveBeenCalledTimes(3);\n+ expect(onFocusCapture).toHaveBeenCalledTimes(3);\n+ expect(log[2]).toEqual(['capture', buttonElement]);\n+ expect(log[3]).toEqual(['bubble', buttonElement]);\n+ expect(log[4]).toEqual(['capture', divElement]);\n+ expect(log[5]).toEqual(['bubble', divElement]);\n+ });\n+\n+ it('handle propagation of focus events between portals', () => {\n+ const buttonRef = React.createRef();\n+ const divRef = React.createRef();\n+ const log = [];\n+ const onFocus = jest.fn(e => log.push(['bubble', e.currentTarget]));\n+ const onFocusCapture = jest.fn(e => log.push(['capture', e.currentTarget]));\n+\n+ const portalElement = document.createElement('div');\n+ document.body.appendChild(portalElement);\n+\n+ function Child() {\n+ return (\n+ \n+ Click me!\n+ <\/div>\n+ );\n+ }\n+\n+ function Parent() {\n+ return (\n+ \n+ {ReactDOM.createPortal(, portalElement)}\n+ <\/button>\n+ );\n+ }\n+\n+ ReactDOM.render(, container);\n+\n+ let buttonElement = buttonRef.current;\n+ buttonElement.focus();\n+ expect(onFocus).toHaveBeenCalledTimes(1);\n+ expect(onFocusCapture).toHaveBeenCalledTimes(1);\n+ expect(log[0]).toEqual(['capture', buttonElement]);\n+ expect(log[1]).toEqual(['bubble', buttonElement]);\n+\n+ let divElement = divRef.current;\n+ divElement.focus();\n+ expect(onFocus).toHaveBeenCalledTimes(3);\n+ expect(onFocusCapture).toHaveBeenCalledTimes(3);\n+ expect(log[2]).toEqual(['capture', buttonElement]);\n+ expect(log[3]).toEqual(['capture', divElement]);\n+ expect(log[4]).toEqual(['bubble', divElement]);\n+ expect(log[5]).toEqual(['bubble', buttonElement]);\n+\n+ document.body.removeChild(portalElement);\n+ });\n+\n+ it('native stopPropagation on focus events between portals', () => {\n+ const buttonRef = React.createRef();\n+ const divRef = React.createRef();\n+ const middelDivRef = React.createRef();\n+ const log = [];\n+ const onFocus = jest.fn(e => log.push(['bubble', e.currentTarget]));\n+ const onFocusCapture = jest.fn(e => log.push(['capture', e.currentTarget]));\n+\n+ const portalElement = document.createElement('div');\n+ document.body.appendChild(portalElement);\n+\n+ function Child() {\n+ return (\n+

{portal}<\/div>\n+ <\/button>\n+ );\n+ }\n+\n+ ReactDOM.render(, container);\n+\n+ let buttonElement = buttonRef.current;\n+ buttonElement.dispatchEvent(\n+ new MouseEvent('mouseover', {\n+ bubbles: true,\n+ cancelable: true,\n+ relatedTarget: null,\n+ }),\n+ );\n+ expect(onMouseEnter).toHaveBeenCalledTimes(1);\n+ expect(onMouseLeave).toHaveBeenCalledTimes(0);\n+ expect(log[0]).toEqual(buttonElement);\n+\n+ let divElement = divRef.current;\n+ buttonElement.dispatchEvent(\n+ new MouseEvent('mouseout', {\n+ bubbles: true,\n+ cancelable: true,\n+ relatedTarget: divElement,\n+ }),\n+ );\n+ divElement.dispatchEvent(\n+ new MouseEvent('mouseover', {\n+ bubbles: true,\n+ cancelable: true,\n+ relatedTarget: buttonElement,\n+ }),\n+ );\n+ expect(onMouseEnter).toHaveBeenCalledTimes(2);\n+ expect(onMouseLeave).toHaveBeenCalledTimes(0);\n+ expect(log[1]).toEqual(divElement);\n+ });\n+\n+ it('should preserve bubble\/capture order between roots and nested portals', () => {\n+ const targetRef = React.createRef();\n+ let log = [];\n+ const onClickRoot = jest.fn(e => log.push('bubble root'));\n+ const onClickCaptureRoot = jest.fn(e => log.push('capture root'));\n+ const onClickPortal = jest.fn(e => log.push('bubble portal'));\n+ const onClickCapturePortal = jest.fn(e => log.push('capture portal'));\n+\n+ function Portal() {\n+ return (\n+ \n+ Click me!\n+ <\/div>\n+ );\n+ }\n+\n+ const portalContainer = document.createElement('div');\n+\n+ let shouldStopPropagation = false;\n+ portalContainer.addEventListener(\n+ 'click',\n+ e => {\n+ if (shouldStopPropagation) {\n+ e.stopPropagation();\n+ }\n+ },\n+ false,\n+ );\n+\n+ function Root() {\n+ let portalTargetRef = React.useRef(null);\n+ React.useLayoutEffect(() => {\n+ portalTargetRef.current.appendChild(portalContainer);\n+ });\n+ return (\n+

\n+

\n+ {ReactDOM.createPortal(, portalContainer)}\n+ <\/div>\n+ );\n+ }\n+\n+ ReactDOM.render(, container);\n+\n+ let divElement = targetRef.current;\n+ dispatchClickEvent(divElement);\n+ expect(log).toEqual([\n+ 'capture root',\n+ 'capture portal',\n+ 'bubble portal',\n+ 'bubble root',\n+ ]);\n+\n+ log = [];\n+\n+ shouldStopPropagation = true;\n+ dispatchClickEvent(divElement);\n+ expect(log).toEqual([\n+ \/\/ The events on root probably shouldn't fire if a non-React intermediated. but current behavior is that they do.\n+ 'capture root',\n+ 'capture portal',\n+ 'bubble portal',\n+ 'bubble root',\n+ ]);\n+ });\n+\n it('handle propagation of click events correctly with FB primer', () => {\n ReactFeatureFlags.enableLegacyFBPrimerSupport = true;\n const aRef = React.createRef();\n@@ -164,8 +1033,9 @@ describe('DOMModernPluginEventSystem', () => {\n );\n }\n ReactDOM.render(, container);\n+ aElement = aRef.current;\n dispatchClickEvent(aElement);\n- expect(onClick).toHaveBeenCalledTimes(1);\n+ expect(onClick).toHaveBeenCalledTimes(2);\n expect(log).toEqual([]);\n expect(onDivClick).toHaveBeenCalledTimes(0);\n });\n","body":"","parents":["fa03206ee4352431198b678c00dca83027e7052d"],"commit":{"subject":"Modern Event System: Support nested portal\/root boundaries (#18201)","revision":"60b11f6c1be111c14c3607809ccad2b8ea680152","shortRevision":"60b11f6c1b","authorName":"Dominic Gannaway","authoredAt":"2020-03-05T09:00:13+00:00","authorEmail":"trueadm@users.noreply.github.com"}}

dillon1000/react

Files changed