{"body":"* ReactDOM.useEvent: add support for all EventTarget types","commit":{"authorEmail":"trueadm@users.noreply.github.com","authorName":"Dominic Gannaway","authoredAt":"2020-03-20T18:31:47+00:00","subject":"ReactDOM.useEvent: add `EventTarget` support (#18355)","shortRevision":"a600408b28","revision":"a600408b284e92ed3d801d7f4e37d10b5da06b10"},"patch":"diff --git a\/packages\/legacy-events\/EventPluginUtils.js b\/packages\/legacy-events\/EventPluginUtils.js\nindex e9081e3c99..cd99330693 100644\n--- a\/packages\/legacy-events\/EventPluginUtils.js\n+++ b\/packages\/legacy-events\/EventPluginUtils.js\n@@ -64,7 +64,8 @@ if (__DEV__) {\n *\/\n export function executeDispatch(event, listener, inst) {\n const type = event.type || 'unknown-event';\n- event.currentTarget = getNodeFromInstance(inst);\n+ event.currentTarget =\n+ inst.tag !== undefined ? getNodeFromInstance(inst) : inst;\n invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);\n event.currentTarget = null;\n }\ndiff --git a\/packages\/legacy-events\/EventSystemFlags.js b\/packages\/legacy-events\/EventSystemFlags.js\nindex 98c2fd9394..e31af6bae3 100644\n--- a\/packages\/legacy-events\/EventSystemFlags.js\n+++ b\/packages\/legacy-events\/EventSystemFlags.js\n@@ -16,4 +16,5 @@ export const IS_ACTIVE = 1 << 3;\n export const PASSIVE_NOT_SUPPORTED = 1 << 4;\n export const IS_REPLAYED = 1 << 5;\n export const IS_FIRST_ANCESTOR = 1 << 6;\n-export const LEGACY_FB_SUPPORT = 1 << 7;\n+export const IS_TARGET_EVENT_ONLY = 1 << 7;\n+export const LEGACY_FB_SUPPORT = 1 << 8;\ndiff --git a\/packages\/legacy-events\/ReactSyntheticEventType.js b\/packages\/legacy-events\/ReactSyntheticEventType.js\nindex 5c98337e03..e0240f3b66 100644\n--- a\/packages\/legacy-events\/ReactSyntheticEventType.js\n+++ b\/packages\/legacy-events\/ReactSyntheticEventType.js\n@@ -39,7 +39,7 @@ export type ReactSyntheticEvent = {|\n nativeEventTarget: EventTarget,\n ) => ReactSyntheticEvent,\n isPersistent: () => boolean,\n- _dispatchInstances: null | Array | Fiber,\n+ _dispatchInstances: null | Array | Fiber | EventTarget,\n _dispatchListeners: null | Array | Function,\n _targetInst: Fiber,\n type: string,\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex d7b647c055..a6e3eeefa5 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -75,11 +75,13 @@ import {\n IS_PASSIVE,\n } from 'legacy-events\/EventSystemFlags';\n import {\n- attachElementListener,\n- detachElementListener,\n- isDOMDocument,\n- isDOMElement,\n+ isManagedDOMElement,\n+ isValidEventTarget,\n listenToTopLevelEvent,\n+ detachListenerFromManagedDOMElement,\n+ attachListenerFromManagedDOMElement,\n+ detachTargetEventListener,\n+ attachTargetEventListener,\n } from '..\/events\/DOMModernPluginEventSystem';\n import {getListenerMapForElement} from '..\/events\/DOMEventListenerMap';\n \n@@ -1122,12 +1124,10 @@ export function registerEvent(\n export function mountEventListener(listener: ReactDOMListener): void {\n if (enableUseEventAPI) {\n const {target} = listener;\n- if (target === window) {\n- \/\/ TODO (useEvent)\n- } else if (isDOMDocument(target)) {\n- \/\/ TODO (useEvent)\n- } else if (isDOMElement(target)) {\n- attachElementListener(listener);\n+ if (isManagedDOMElement(target)) {\n+ attachListenerFromManagedDOMElement(listener);\n+ } else {\n+ attachTargetEventListener(listener);\n }\n }\n }\n@@ -1135,12 +1135,10 @@ export function mountEventListener(listener: ReactDOMListener): void {\n export function unmountEventListener(listener: ReactDOMListener): void {\n if (enableUseEventAPI) {\n const {target} = listener;\n- if (target === window) {\n- \/\/ TODO (useEvent)\n- } else if (isDOMDocument(target)) {\n- \/\/ TODO (useEvent)\n- } else if (isDOMElement(target)) {\n- detachElementListener(listener);\n+ if (isManagedDOMElement(target)) {\n+ detachListenerFromManagedDOMElement(listener);\n+ } else {\n+ detachTargetEventListener(listener);\n }\n }\n }\n@@ -1152,10 +1150,7 @@ export function validateEventListenerTarget(\n if (enableUseEventAPI) {\n if (\n target != null &&\n- (target === window ||\n- isDOMDocument(target) ||\n- (isDOMElement(target) &&\n- getClosestInstanceFromNode(((target: any): Element))))\n+ (isManagedDOMElement(target) || isValidEventTarget(target))\n ) {\n if (listener == null || typeof listener === 'function') {\n return true;\n@@ -1169,11 +1164,8 @@ export function validateEventListenerTarget(\n }\n if (__DEV__) {\n console.warn(\n- 'Event listener method setListener() from useEvent() hook requires the first argument to be either:' +\n- '\\n\\n' +\n- '1. A valid DOM node that was rendered and managed by React\\n' +\n- '2. The \"window\" object\\n' +\n- '3. The \"document\" object',\n+ 'Event listener method setListener() from useEvent() hook requires the first argument to be ' +\n+ 'a valid DOM EventTarget. If using a ref, ensure the current value is not null.',\n );\n }\n }\ndiff --git a\/packages\/react-dom\/src\/events\/DOMEventListenerMap.js b\/packages\/react-dom\/src\/events\/DOMEventListenerMap.js\nindex ec4ad61c3e..a777fb1bb1 100644\n--- a\/packages\/react-dom\/src\/events\/DOMEventListenerMap.js\n+++ b\/packages\/react-dom\/src\/events\/DOMEventListenerMap.js\n@@ -12,11 +12,11 @@ import type {DOMTopLevelEventType} from 'legacy-events\/TopLevelEventTypes';\n import {registrationNameDependencies} from 'legacy-events\/EventPluginRegistry';\n \n const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;\n-\/\/ prettier-ignore\n-const elementListenerMap:\n- \/\/ $FlowFixMe Work around Flow bug\n- | WeakMap\n- | Map = new PossiblyWeakMap();\n+\/\/ $FlowFixMe: Flow cannot handle polymorphic WeakMaps\n+const elementListenerMap: WeakMap<\n+ EventTarget,\n+ ElementListenerMap,\n+> = new PossiblyWeakMap();\n \n export type ElementListenerMap = Map<\n DOMTopLevelEventType | string,\ndiff --git a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\nindex 1b09bb3cc2..9188c120f9 100644\n--- a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n@@ -27,7 +27,11 @@ import {registrationNameDependencies} from 'legacy-events\/EventPluginRegistry';\n import {batchedEventUpdates} from 'legacy-events\/ReactGenericBatching';\n import {executeDispatchesInOrder} from 'legacy-events\/EventPluginUtils';\n import {plugins} from 'legacy-events\/EventPluginRegistry';\n-import {LEGACY_FB_SUPPORT, IS_REPLAYED} from 'legacy-events\/EventSystemFlags';\n+import {\n+ LEGACY_FB_SUPPORT,\n+ IS_REPLAYED,\n+ IS_TARGET_EVENT_ONLY,\n+} from 'legacy-events\/EventSystemFlags';\n \n import {HostRoot, HostPortal} from 'shared\/ReactWorkTags';\n \n@@ -77,11 +81,7 @@ import {\n getListenersFromTarget,\n initListenersSet,\n } from '..\/client\/ReactDOMComponentTree';\n-import {\n- DOCUMENT_NODE,\n- COMMENT_NODE,\n- ELEMENT_NODE,\n-} from '..\/shared\/HTMLNodeType';\n+import {COMMENT_NODE} from '..\/shared\/HTMLNodeType';\n import {topLevelEventsToDispatchConfig} from '.\/DOMEventProperties';\n \n import {enableLegacyFBSupport} from 'shared\/ReactFeatureFlags';\n@@ -132,6 +132,17 @@ const emptyDispatchConfigForCustomEvents: CustomDispatchConfig = {\n \n const isArray = Array.isArray;\n \n+\/\/ $FlowFixMe: Flow struggles with this pattern\n+const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;\n+\/\/ $FlowFixMe: Flow cannot handle polymorphic WeakMaps\n+export const eventTargetEventListenerStore: WeakMap<\n+ EventTarget,\n+ Map<\n+ DOMTopLevelEventType,\n+ {bubbled: Set, captured: Set},\n+ >,\n+> = new PossiblyWeakMap();\n+\n function dispatchEventsForPlugins(\n topLevelType: DOMTopLevelEventType,\n eventSystemFlags: EventSystemFlags,\n@@ -198,11 +209,27 @@ export function listenToTopLevelEvent(\n listenerMap: ElementListenerMap,\n passive?: boolean,\n priority?: EventPriority,\n+ capture?: boolean,\n ): void {\n- const listenerEntry = listenerMap.get(topLevelType);\n+ \/\/ If we explicitly define capture, then these are for EventTarget objects,\n+ \/\/ rather than React managed DOM elements. So we need to ensure we separate\n+ \/\/ capture and non-capture events. For React managed DOM nodes we only use\n+ \/\/ one or the other, never both. Which one we use is determined by the the\n+ \/\/ capturePhaseEvents Set (in this module) that defines if the event listener\n+ \/\/ should use the capture phase – otherwise we always use the bubble phase.\n+ \/\/ Finally, when we get to dispatching and accumulating event listeners, we\n+ \/\/ check if the user wanted capture\/bubble and emulate the behavior at that\n+ \/\/ point (we call this accumulating two phase listeners).\n+ const typeStr = ((topLevelType: any): string);\n+ const listenerMapKey =\n+ capture === undefined\n+ ? topLevelType\n+ : `${typeStr}_${capture ? 'capture' : 'bubble'}`;\n+ const listenerEntry = listenerMap.get(listenerMapKey);\n const shouldUpgrade = shouldUpgradeListener(listenerEntry, passive);\n if (listenerEntry === undefined || shouldUpgrade) {\n- const isCapturePhase = capturePhaseEvents.has(topLevelType);\n+ const isCapturePhase =\n+ capture === undefined ? capturePhaseEvents.has(topLevelType) : capture;\n \/\/ If we should upgrade, then we need to remove the existing trapped\n \/\/ event listener for the target container.\n if (shouldUpgrade) {\n@@ -221,7 +248,7 @@ export function listenToTopLevelEvent(\n passive,\n priority,\n );\n- listenerMap.set(topLevelType, {passive, listener});\n+ listenerMap.set(listenerMapKey, {passive, listener});\n }\n }\n \n@@ -269,14 +296,12 @@ function isMatchingRootContainer(\n );\n }\n \n-export function isDOMElement(target: EventTarget): boolean {\n- const nodeType = ((target: any): Node).nodeType;\n- return (nodeType: any) && nodeType === ELEMENT_NODE;\n+export function isManagedDOMElement(target: EventTarget): boolean {\n+ return getClosestInstanceFromNode(((target: any): Node)) !== null;\n }\n \n-export function isDOMDocument(target: EventTarget): boolean {\n- const nodeType = ((target: any): Node).nodeType;\n- return nodeType === DOCUMENT_NODE;\n+export function isValidEventTarget(target: EventTarget): boolean {\n+ return typeof target.addEventListener === 'function';\n }\n \n export function dispatchEventForPluginEventSystem(\n@@ -288,87 +313,85 @@ export function dispatchEventForPluginEventSystem(\n ): void {\n let ancestorInst = targetInst;\n if (targetContainer !== null) {\n- const possibleTargetContainerNode = ((targetContainer: any): Node);\n- \/\/ Given the rootContainer can be any EventTarget, if the\n- \/\/ target is not a valid DOM element then we'll skip this part.\n- if (\n- possibleTargetContainerNode === window ||\n- !isDOMElement(possibleTargetContainerNode)\n- ) {\n- \/\/ TODO: useEvent for document and window\n- return;\n- }\n- \/\/ If we are using the legacy FB support flag, we\n- \/\/ defer the event to the null with a one\n- \/\/ time event listener so we can defer the event.\n- if (\n- enableLegacyFBSupport &&\n- \/\/ We do not want to defer if the event system has already been\n- \/\/ set to LEGACY_FB_SUPPORT. LEGACY_FB_SUPPORT only gets set when\n- \/\/ we call willDeferLaterForLegacyFBSupport, thus not bailing out\n- \/\/ will result in endless cycles like an infinite loop.\n- (eventSystemFlags & LEGACY_FB_SUPPORT) === 0 &&\n- \/\/ We also don't want to defer during event replaying.\n- (eventSystemFlags & IS_REPLAYED) === 0 &&\n- willDeferLaterForLegacyFBSupport(topLevelType, targetContainer)\n- ) {\n- return;\n- }\n- if (targetInst !== null) {\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+ if (eventTargetEventListenerStore.has(targetContainer)) {\n+ \/\/ For TargetEvent nodes (i.e. document, window)\n+ ancestorInst = null;\n+ eventSystemFlags |= IS_TARGET_EVENT_ONLY;\n+ } else {\n+ const targetContainerNode = ((targetContainer: any): Node);\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, possibleTargetContainerNode)) {\n- break;\n+ \/\/ If we are using the legacy FB support flag, we\n+ \/\/ defer the event to the null with a one\n+ \/\/ time event listener so we can defer the event.\n+ if (\n+ enableLegacyFBSupport &&\n+ \/\/ We do not want to defer if the event system has already been\n+ \/\/ set to LEGACY_FB_SUPPORT. LEGACY_FB_SUPPORT only gets set when\n+ \/\/ we call willDeferLaterForLegacyFBSupport, thus not bailing out\n+ \/\/ will result in endless cycles like an infinite loop.\n+ (eventSystemFlags & LEGACY_FB_SUPPORT) === 0 &&\n+ \/\/ We also don't want to defer during event replaying.\n+ (eventSystemFlags & IS_REPLAYED) === 0 &&\n+ willDeferLaterForLegacyFBSupport(topLevelType, targetContainer)\n+ ) {\n+ return;\n+ }\n+ if (targetInst !== null) {\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 === 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 (node.tag === HostRoot || node.tag === HostPortal) {\n+ const container = node.stateNode.containerInfo;\n+ if (isMatchingRootContainer(container, targetContainerNode)) {\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 (\n- isMatchingRootContainer(\n- grandContainer,\n- possibleTargetContainerNode,\n- )\n+ grandNode.tag === HostRoot ||\n+ grandNode.tag === HostPortal\n ) {\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+ const grandContainer = grandNode.stateNode.containerInfo;\n+ if (\n+ isMatchingRootContainer(grandContainer, targetContainerNode)\n+ ) {\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- grandNode = grandNode.return;\n }\n+ const parentSubtreeInst = getClosestInstanceFromNode(container);\n+ if (parentSubtreeInst === null) {\n+ return;\n+ }\n+ node = ancestorInst = parentSubtreeInst;\n+ continue;\n }\n- const parentSubtreeInst = getClosestInstanceFromNode(container);\n- if (parentSubtreeInst === null) {\n- return;\n- }\n- node = ancestorInst = parentSubtreeInst;\n- continue;\n+ node = node.return;\n }\n- node = node.return;\n }\n }\n }\n@@ -398,21 +421,32 @@ function getNearestRootOrPortalContainer(instance: Element): Element {\n return instance;\n }\n \n-export function attachElementListener(listener: ReactDOMListener): void {\n+function addEventTypeToDispatchConfig(type: DOMTopLevelEventType): void {\n+ let dispatchConfig = topLevelEventsToDispatchConfig.get(type);\n+ \/\/ If we don't have a dispatchConfig, then we're dealing with\n+ \/\/ an event type that React does not know about (i.e. a custom event).\n+ \/\/ We need to register an event config for this or the SimpleEventPlugin\n+ \/\/ will not appropriately provide a SyntheticEvent, so we use out empty\n+ \/\/ dispatch config for custom events.\n+ if (dispatchConfig === undefined) {\n+ topLevelEventsToDispatchConfig.set(\n+ type,\n+ emptyDispatchConfigForCustomEvents,\n+ );\n+ }\n+}\n+\n+export function attachListenerFromManagedDOMElement(\n+ listener: ReactDOMListener,\n+): void {\n const {event, target} = listener;\n const {passive, priority, type} = event;\n+ const possibleManagedTarget = ((target: any): Element);\n let containerEventTarget = target;\n- \/\/ If we the target is a managed React element, then we need to\n- \/\/ find the nearest root\/portal contained to attach the event listener\n- \/\/ to. If it's not managed, i.e. the window, then we just attach\n- \/\/ the listener to the target.\n- if (isDOMElement(target)) {\n- const possibleManagedTarget = ((target: any): Element);\n- if (getClosestInstanceFromNode(possibleManagedTarget)) {\n- containerEventTarget = getNearestRootOrPortalContainer(\n- possibleManagedTarget,\n- );\n- }\n+ if (getClosestInstanceFromNode(possibleManagedTarget)) {\n+ containerEventTarget = getNearestRootOrPortalContainer(\n+ possibleManagedTarget,\n+ );\n }\n const listenerMap = getListenerMapForElement(containerEventTarget);\n \/\/ Add the event listener to the target container (falling back to\n@@ -434,21 +468,12 @@ export function attachElementListener(listener: ReactDOMListener): void {\n \/\/ Add our listener to the listeners Set.\n listeners.add(listener);\n \/\/ Finally, add the event to our known event types list.\n- let dispatchConfig = topLevelEventsToDispatchConfig.get(type);\n- \/\/ If we don't have a dispatchConfig, then we're dealing with\n- \/\/ an event type that React does not know about (i.e. a custom event).\n- \/\/ We need to register an event config for this or the SimpleEventPlugin\n- \/\/ will not appropriately provide a SyntheticEvent, so we use out empty\n- \/\/ dispatch config for custom events.\n- if (dispatchConfig === undefined) {\n- topLevelEventsToDispatchConfig.set(\n- type,\n- emptyDispatchConfigForCustomEvents,\n- );\n- }\n+ addEventTypeToDispatchConfig(type);\n }\n \n-export function detachElementListener(listener: ReactDOMListener): void {\n+export function detachListenerFromManagedDOMElement(\n+ listener: ReactDOMListener,\n+): void {\n const {target} = listener;\n \/\/ Get the internal listeners Set from the target instance.\n const listeners = getListenersFromTarget(target);\n@@ -457,3 +482,47 @@ export function detachElementListener(listener: ReactDOMListener): void {\n listeners.delete(listener);\n }\n }\n+\n+export function attachTargetEventListener(listener: ReactDOMListener): void {\n+ const {event, target} = listener;\n+ const {capture, passive, priority, type} = event;\n+ const listenerMap = getListenerMapForElement(target);\n+ \/\/ Add the event listener to the TargetEvent object.\n+ listenToTopLevelEvent(type, target, listenerMap, passive, priority, capture);\n+ let eventTypeMap = eventTargetEventListenerStore.get(target);\n+ if (eventTypeMap === undefined) {\n+ eventTypeMap = new Map();\n+ eventTargetEventListenerStore.set(target, eventTypeMap);\n+ }\n+ \/\/ Get the listeners by the event type\n+ let listeners = eventTypeMap.get(type);\n+ if (listeners === undefined) {\n+ listeners = {captured: new Set(), bubbled: new Set()};\n+ eventTypeMap.set(type, listeners);\n+ }\n+ \/\/ Add our listener to the listeners Set.\n+ if (capture) {\n+ listeners.captured.add(listener);\n+ } else {\n+ listeners.bubbled.add(listener);\n+ }\n+ \/\/ Finally, add the event to our known event types list.\n+ addEventTypeToDispatchConfig(type);\n+}\n+\n+export function detachTargetEventListener(listener: ReactDOMListener): void {\n+ const {event, target} = listener;\n+ const {capture, type} = event;\n+ const eventTypeMap = eventTargetEventListenerStore.get(target);\n+ if (eventTypeMap !== undefined) {\n+ const listeners = eventTypeMap.get(type);\n+ if (listeners !== undefined) {\n+ \/\/ Remove out listener from the listeners Set.\n+ if (capture) {\n+ listeners.captured.delete(listener);\n+ } else {\n+ listeners.bubbled.delete(listener);\n+ }\n+ }\n+ }\n+}\ndiff --git a\/packages\/react-dom\/src\/events\/SimpleEventPlugin.js b\/packages\/react-dom\/src\/events\/SimpleEventPlugin.js\nindex 0f96651e3c..bb48fde73a 100644\n--- a\/packages\/react-dom\/src\/events\/SimpleEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/SimpleEventPlugin.js\n@@ -83,6 +83,7 @@ const SimpleEventPlugin: PluginModule = {\n nativeEvent: MouseEvent,\n nativeEventTarget: null | EventTarget,\n eventSystemFlags: EventSystemFlags,\n+ targetContainer?: null | EventTarget,\n ): null | ReactSyntheticEvent {\n const dispatchConfig = topLevelEventsToDispatchConfig.get(topLevelType);\n if (!dispatchConfig) {\n@@ -194,7 +195,7 @@ const SimpleEventPlugin: PluginModule = {\n nativeEvent,\n nativeEventTarget,\n );\n- accumulateTwoPhaseListeners(event, true);\n+ accumulateTwoPhaseListeners(event, true, eventSystemFlags, targetContainer);\n return event;\n },\n };\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 e49236cacb..0794b89a2e 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@@ -25,6 +25,27 @@ function dispatchClickEvent(element) {\n dispatchEvent(element, 'click');\n }\n \n+let eventListenersToClear = [];\n+\n+function startNativeEventListenerClearDown() {\n+ const nativeWindowEventListener = window.addEventListener;\n+ window.addEventListener = function(...params) {\n+ eventListenersToClear.push({target: window, params});\n+ return nativeWindowEventListener.apply(this, params);\n+ };\n+ const nativeDocumentEventListener = document.addEventListener;\n+ document.addEventListener = function(...params) {\n+ eventListenersToClear.push({target: document, params});\n+ return nativeDocumentEventListener.apply(this, params);\n+ };\n+}\n+\n+function endNativeEventListenerClearDown() {\n+ eventListenersToClear.forEach(({target, params}) => {\n+ target.removeEventListener(...params);\n+ });\n+}\n+\n describe('DOMModernPluginEventSystem', () => {\n let container;\n \n@@ -45,11 +66,13 @@ describe('DOMModernPluginEventSystem', () => {\n ReactDOMServer = require('react-dom\/server');\n container = document.createElement('div');\n document.body.appendChild(container);\n+ startNativeEventListenerClearDown();\n });\n \n afterEach(() => {\n document.body.removeChild(container);\n container = null;\n+ endNativeEventListenerClearDown();\n });\n \n it('handle propagation of click events', () => {\n@@ -1328,14 +1351,18 @@ describe('DOMModernPluginEventSystem', () => {\n expect(log[0]).toEqual(['capture', buttonElement]);\n expect(log[1]).toEqual(['bubble', buttonElement]);\n \n+ log.length = 0;\n+ onClick.mockClear();\n+ onClickCapture.mockClear();\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+ expect(onClick).toHaveBeenCalledTimes(2);\n+ expect(onClickCapture).toHaveBeenCalledTimes(2);\n+ expect(log[0]).toEqual(['capture', buttonElement]);\n+ expect(log[1]).toEqual(['capture', divElement]);\n+ expect(log[2]).toEqual(['bubble', divElement]);\n+ expect(log[3]).toEqual(['bubble', buttonElement]);\n });\n \n it('handle propagation of click events mixed with onClick events', () => {\n@@ -1787,6 +1814,258 @@ describe('DOMModernPluginEventSystem', () => {\n expect(clickEvent).toHaveBeenCalledTimes(1);\n });\n \n+ it('should correctly work for a basic \"click\" window listener', () => {\n+ const log = [];\n+ const clickEvent = jest.fn(event => {\n+ log.push({\n+ eventPhase: event.eventPhase,\n+ type: event.type,\n+ currentTarget: event.currentTarget,\n+ target: event.target,\n+ });\n+ });\n+\n+ function Test() {\n+ const click = ReactDOM.unstable_useEvent('click');\n+\n+ React.useEffect(() => {\n+ click.setListener(window, clickEvent);\n+ });\n+\n+ return

dillon1000/react

Files changed