{"files":[{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMComponent.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMEventHandle.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/PluginModuleType.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/__tests__\/DOMModernPluginEventSystem-test.internal.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernChangeEventPlugin-test.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernSelectEventPlugin-test.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/legacy-events\/PluginModuleType.js","status":"M"}],"commit":{"subject":"Modern Event System: make on*Capture events use capture phase (#19221)","revision":"f5ea39c18269921107ea70353d86958064889bea","authorEmail":"trueadm@users.noreply.github.com","authoredAt":"2020-07-08T17:10:06+01:00","shortRevision":"f5ea39c182","authorName":"Dominic Gannaway"},"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js\nindex db4ad0e847..3c8ce165eb 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js\n@@ -2714,28 +2714,23 @@ describe('ReactDOMComponent', () => {\n \n innerRef.current.click();\n \n- \/\/ The order we receive here is not ideal since it is expected that the\n- \/\/ capture listener fire before all bubble listeners. Other React apps\n- \/\/ might depend on this.\n- \/\/\n- \/\/ @see https:\/\/github.com\/facebook\/react\/pull\/12919#issuecomment-395224674\n if (ReactFeatureFlags.enableLegacyFBSupport) {\n \/\/ The order will change here, as the legacy FB support adds\n \/\/ the event listener onto the document after the one above has.\n expect(eventOrder).toEqual([\n 'document capture',\n- 'document bubble',\n+ 'outer capture',\n 'inner capture',\n+ 'document bubble',\n 'inner bubble',\n- 'outer capture',\n 'outer bubble',\n ]);\n } else {\n expect(eventOrder).toEqual([\n 'document capture',\n+ 'outer capture',\n 'inner capture',\n 'inner bubble',\n- 'outer capture',\n 'outer bubble',\n 'document bubble',\n ]);\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\nindex 06ff7e52f8..71a90cd3e6 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMComponent.js\n@@ -13,6 +13,7 @@ import {\n registrationNameDependencies,\n possibleRegistrationNames,\n } from '..\/events\/EventRegistry';\n+\n import {canUseDOM} from 'shared\/ExecutionEnvironment';\n import invariant from 'shared\/invariant';\n import {\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js b\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js\nindex 1ce1a760cc..3118d85c1e 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMEventHandle.js\n@@ -26,7 +26,6 @@ import {ELEMENT_NODE} from '..\/shared\/HTMLNodeType';\n import {\n listenToTopLevelEvent,\n addEventTypeToDispatchConfig,\n- capturePhaseEvents,\n } from '..\/events\/DOMModernPluginEventSystem';\n \n import {HostRoot, HostPortal} from 'react-reconciler\/src\/ReactWorkTags';\n@@ -87,6 +86,7 @@ function registerEventOnNearestTargetContainer(\n topLevelType: DOMTopLevelEventType,\n passive: boolean | void,\n priority: EventPriority | void,\n+ capture: boolean,\n ): void {\n \/\/ If it is, find the nearest root or portal and make it\n \/\/ our event handle target container.\n@@ -99,7 +99,6 @@ function registerEventOnNearestTargetContainer(\n );\n }\n const listenerMap = getEventListenerMap(targetContainer);\n- const capture = capturePhaseEvents.has(topLevelType);\n listenToTopLevelEvent(\n topLevelType,\n targetContainer,\n@@ -135,6 +134,7 @@ function registerReactDOMEvent(\n topLevelType,\n passive,\n priority,\n+ capture,\n );\n } else if (enableScopeAPI && isReactScope(target)) {\n const scopeTarget = ((target: any): ReactScopeInstance);\n@@ -148,6 +148,7 @@ function registerReactDOMEvent(\n topLevelType,\n passive,\n priority,\n+ capture,\n );\n } else if (isValidEventTarget(target)) {\n const eventTarget = ((target: any): EventTarget);\ndiff --git a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\nindex ccfdf65469..f6100d8a38 100644\n--- a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n@@ -29,8 +29,8 @@ import {\n PLUGIN_EVENT_SYSTEM,\n LEGACY_FB_SUPPORT,\n IS_REPLAYED,\n- IS_TARGET_PHASE_ONLY,\n IS_CAPTURE_PHASE,\n+ IS_TARGET_PHASE_ONLY,\n } from '.\/EventSystemFlags';\n \n import {\n@@ -131,6 +131,12 @@ function extractEvents(\n eventSystemFlags: EventSystemFlags,\n targetContainer: null | EventTarget,\n ) {\n+ \/\/ TODO: we should remove the concept of a \"SimpleEventPlugin\".\n+ \/\/ This is the basic functionality of the event system. All\n+ \/\/ the other plugins are essentially polyfills. So the plugin\n+ \/\/ should probably be inlined somewhere and have its logic\n+ \/\/ be core the to event system. This would potentially allow\n+ \/\/ us to ship builds of React without the polyfilled plugins below.\n ModernSimpleEventPlugin.extractEvents(\n dispatchQueue,\n topLevelType,\n@@ -140,42 +146,64 @@ function extractEvents(\n eventSystemFlags,\n targetContainer,\n );\n- ModernEnterLeaveEventPlugin.extractEvents(\n- dispatchQueue,\n- topLevelType,\n- targetInst,\n- nativeEvent,\n- nativeEventTarget,\n- eventSystemFlags,\n- targetContainer,\n- );\n- ModernChangeEventPlugin.extractEvents(\n- dispatchQueue,\n- topLevelType,\n- targetInst,\n- nativeEvent,\n- nativeEventTarget,\n- eventSystemFlags,\n- targetContainer,\n- );\n- ModernSelectEventPlugin.extractEvents(\n- dispatchQueue,\n- topLevelType,\n- targetInst,\n- nativeEvent,\n- nativeEventTarget,\n- eventSystemFlags,\n- targetContainer,\n- );\n- ModernBeforeInputEventPlugin.extractEvents(\n- dispatchQueue,\n- topLevelType,\n- targetInst,\n- nativeEvent,\n- nativeEventTarget,\n- eventSystemFlags,\n- targetContainer,\n- );\n+ const shouldProcessPolyfillPlugins =\n+ (eventSystemFlags & IS_CAPTURE_PHASE) === 0 ||\n+ capturePhaseEvents.has(topLevelType);\n+ \/\/ We don't process these events unless we are in the\n+ \/\/ event's native \"bubble\" phase, which means that we're\n+ \/\/ not in the capture phase. That's because we emulate\n+ \/\/ the capture phase here still. This is a trade-off,\n+ \/\/ because in an ideal world we would not emulate and use\n+ \/\/ the phases properly, like we do with the SimpleEvent\n+ \/\/ plugin. However, the plugins below either expect\n+ \/\/ emulation (EnterLeave) or use state localized to that\n+ \/\/ plugin (BeforeInput, Change, Select). The state in\n+ \/\/ these modules complicates things, as you'll essentially\n+ \/\/ get the case where the capture phase event might change\n+ \/\/ state, only for the following bubble event to come in\n+ \/\/ later and not trigger anything as the state now\n+ \/\/ invalidates the heuristics of the event plugin. We\n+ \/\/ could alter all these plugins to work in such ways, but\n+ \/\/ that might cause other unknown side-effects that we\n+ \/\/ can't forsee right now.\n+ if (shouldProcessPolyfillPlugins) {\n+ ModernEnterLeaveEventPlugin.extractEvents(\n+ dispatchQueue,\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ eventSystemFlags,\n+ targetContainer,\n+ );\n+ ModernChangeEventPlugin.extractEvents(\n+ dispatchQueue,\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ eventSystemFlags,\n+ targetContainer,\n+ );\n+ ModernSelectEventPlugin.extractEvents(\n+ dispatchQueue,\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ eventSystemFlags,\n+ targetContainer,\n+ );\n+ ModernBeforeInputEventPlugin.extractEvents(\n+ dispatchQueue,\n+ topLevelType,\n+ targetInst,\n+ nativeEvent,\n+ nativeEventTarget,\n+ eventSystemFlags,\n+ targetContainer,\n+ );\n+ }\n }\n \n export const capturePhaseEvents: Set = new Set([\n@@ -229,38 +257,42 @@ function executeDispatch(\n event.currentTarget = null;\n }\n \n-function executeDispatchesInOrder(\n+function processDispatchQueueItemsInOrder(\n event: ReactSyntheticEvent,\n- capture: DispatchQueueItemPhase,\n- bubble: DispatchQueueItemPhase,\n+ phase: DispatchQueueItemPhase,\n+ inCapturePhase: boolean,\n ): void {\n let previousInstance;\n- \/\/ Dispatch capture phase first.\n- for (let i = capture.length - 1; i >= 0; i--) {\n- const {instance, currentTarget, listener} = capture[i];\n- if (instance !== previousInstance && event.isPropagationStopped()) {\n- return;\n+ if (inCapturePhase) {\n+ for (let i = phase.length - 1; i >= 0; i--) {\n+ const {instance, currentTarget, listener} = phase[i];\n+ if (instance !== previousInstance && event.isPropagationStopped()) {\n+ return;\n+ }\n+ executeDispatch(event, listener, currentTarget);\n+ previousInstance = instance;\n }\n- executeDispatch(event, listener, currentTarget);\n- previousInstance = instance;\n- }\n- previousInstance = undefined;\n- \/\/ Dispatch bubble phase second.\n- for (let i = 0; i < bubble.length; i++) {\n- const {instance, currentTarget, listener} = bubble[i];\n- if (instance !== previousInstance && event.isPropagationStopped()) {\n- return;\n+ } else {\n+ for (let i = 0; i < phase.length; i++) {\n+ const {instance, currentTarget, listener} = phase[i];\n+ if (instance !== previousInstance && event.isPropagationStopped()) {\n+ return;\n+ }\n+ executeDispatch(event, listener, currentTarget);\n+ previousInstance = instance;\n }\n- executeDispatch(event, listener, currentTarget);\n- previousInstance = instance;\n }\n }\n \n-export function dispatchEventsInBatch(dispatchQueue: DispatchQueue): void {\n+export function processDispatchQueue(\n+ dispatchQueue: DispatchQueue,\n+ eventSystemFlags: EventSystemFlags,\n+): void {\n+ const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;\n for (let i = 0; i < dispatchQueue.length; i++) {\n const dispatchQueueItem: DispatchQueueItem = dispatchQueue[i];\n- const {event, capture, bubble} = dispatchQueueItem;\n- executeDispatchesInOrder(event, capture, bubble);\n+ const {event, phase} = dispatchQueueItem;\n+ processDispatchQueueItemsInOrder(event, phase, inCapturePhase);\n \/\/ Modern event system doesn't use pooling.\n }\n \/\/ This would be a good time to rethrow if any of the event handlers threw.\n@@ -285,7 +317,7 @@ function dispatchEventsForPlugins(\n eventSystemFlags,\n targetContainer,\n );\n- dispatchEventsInBatch(dispatchQueue);\n+ processDispatchQueue(dispatchQueue, eventSystemFlags);\n }\n \n function shouldUpgradeListener(\n@@ -348,6 +380,11 @@ export function listenToTopLevelEvent(\n }\n }\n \n+function isCaptureRegistrationName(registrationName: string): boolean {\n+ const len = registrationName.length;\n+ return registrationName.substr(len - 7) === 'Capture';\n+}\n+\n export function listenToReactPropEvent(\n reactPropEvent: string,\n rootContainerElement: Element,\n@@ -362,11 +399,19 @@ export function listenToReactPropEvent(\n \/\/ this React prop event again.\n listenerMap.set(reactPropEvent, null);\n const dependencies = registrationNameDependencies[reactPropEvent];\n+ const dependenciesLength = dependencies.length;\n+ \/\/ If the dependencies length is 1, that means we're not using a polyfill\n+ \/\/ plugin like ChangeEventPlugin, BeforeInputPlugin, EnterLeavePlugin and\n+ \/\/ SelectEventPlugin. SimpleEventPlugin always only has a single dependency.\n+ \/\/ Given this, we know that we never need to apply capture phase event\n+ \/\/ listeners to anything other than the SimpleEventPlugin.\n+ const registrationCapturePhase =\n+ isCaptureRegistrationName(reactPropEvent) && dependenciesLength === 1;\n \n- for (let i = 0; i < dependencies.length; i++) {\n+ for (let i = 0; i < dependenciesLength; i++) {\n const dependency = dependencies[i];\n- const capture = capturePhaseEvents.has(dependency);\n-\n+ const capture =\n+ capturePhaseEvents.has(dependency) || registrationCapturePhase;\n listenToTopLevelEvent(\n dependency,\n rootContainerElement,\n@@ -524,6 +569,8 @@ export function dispatchEventForPluginEventSystem(\n (eventSystemFlags & LEGACY_FB_SUPPORT) === 0 &&\n \/\/ We also don't want to defer during event replaying.\n (eventSystemFlags & IS_REPLAYED) === 0 &&\n+ \/\/ We don't apply this during capture phase.\n+ (eventSystemFlags & IS_CAPTURE_PHASE) === 0 &&\n willDeferLaterForLegacyFBSupport(topLevelType, targetContainer)\n ) {\n return;\n@@ -622,26 +669,23 @@ function createDispatchQueueItemPhaseEntry(\n \n function createDispatchQueueItem(\n event: ReactSyntheticEvent,\n- capture: DispatchQueueItemPhase,\n- bubble: DispatchQueueItemPhase,\n+ phase: DispatchQueueItemPhase,\n ): DispatchQueueItem {\n return {\n event,\n- capture,\n- bubble,\n+ phase,\n };\n }\n \n-export function accumulateTwoPhaseListeners(\n+export function accumulateSinglePhaseListeners(\n targetFiber: Fiber | null,\n dispatchQueue: DispatchQueue,\n event: ReactSyntheticEvent,\n- accumulateEventHandleListeners?: boolean,\n+ inCapturePhase: boolean,\n ): void {\n const bubbled = event._reactName;\n const captured = bubbled !== null ? bubbled + 'Capture' : null;\n- const capturePhase: DispatchQueueItemPhase = [];\n- const bubblePhase: DispatchQueueItemPhase = [];\n+ const phase: DispatchQueueItemPhase = [];\n \n \/\/ If we are not handling EventTarget only phase, then we're doing the\n \/\/ usual two phase accumulation using the React fiber tree to pick up\n@@ -649,6 +693,11 @@ export function accumulateTwoPhaseListeners(\n let instance = targetFiber;\n let lastHostComponent = null;\n const targetType = event.type;\n+ \/\/ shouldEmulateTwoPhase is temporary till we can polyfill focus\/blur to\n+ \/\/ focusin\/focusout.\n+ const shouldEmulateTwoPhase = capturePhaseEvents.has(\n+ ((targetType: any): DOMTopLevelEventType),\n+ );\n \n \/\/ Accumulate all instances and listeners via the target -> root path.\n while (instance !== null) {\n@@ -658,7 +707,7 @@ export function accumulateTwoPhaseListeners(\n const currentTarget = stateNode;\n lastHostComponent = currentTarget;\n \/\/ For Event Handle listeners\n- if (enableCreateEventHandleAPI && accumulateEventHandleListeners) {\n+ if (enableCreateEventHandleAPI) {\n const listeners = getEventHandlerListeners(currentTarget);\n \n if (listeners !== null) {\n@@ -667,32 +716,35 @@ export function accumulateTwoPhaseListeners(\n const listener = listenersArr[i];\n const {callback, capture, type} = listener;\n if (type === targetType) {\n- if (capture === true) {\n- capturePhase.push(\n+ if (capture && inCapturePhase) {\n+ phase.push(\n createDispatchQueueItemPhaseEntry(\n instance,\n callback,\n currentTarget,\n ),\n );\n- } else {\n- bubblePhase.push(\n- createDispatchQueueItemPhaseEntry(\n- instance,\n- callback,\n- currentTarget,\n- ),\n+ } else if (!capture) {\n+ const entry = createDispatchQueueItemPhaseEntry(\n+ instance,\n+ callback,\n+ currentTarget,\n );\n+ if (shouldEmulateTwoPhase) {\n+ phase.unshift(entry);\n+ } else if (!inCapturePhase) {\n+ phase.push(entry);\n+ }\n }\n }\n }\n }\n }\n \/\/ Standard React on* listeners, i.e. onClick prop\n- if (captured !== null) {\n+ if (captured !== null && inCapturePhase) {\n const captureListener = getListener(instance, captured);\n if (captureListener != null) {\n- capturePhase.push(\n+ phase.push(\n createDispatchQueueItemPhaseEntry(\n instance,\n captureListener,\n@@ -704,19 +756,21 @@ export function accumulateTwoPhaseListeners(\n if (bubbled !== null) {\n const bubbleListener = getListener(instance, bubbled);\n if (bubbleListener != null) {\n- bubblePhase.push(\n- createDispatchQueueItemPhaseEntry(\n- instance,\n- bubbleListener,\n- currentTarget,\n- ),\n+ const entry = createDispatchQueueItemPhaseEntry(\n+ instance,\n+ bubbleListener,\n+ currentTarget,\n );\n+ if (shouldEmulateTwoPhase) {\n+ phase.unshift(entry);\n+ } else if (!inCapturePhase) {\n+ phase.push(entry);\n+ }\n }\n }\n } else if (\n enableCreateEventHandleAPI &&\n enableScopeAPI &&\n- accumulateEventHandleListeners &&\n tag === ScopeComponent &&\n lastHostComponent !== null\n ) {\n@@ -730,22 +784,25 @@ export function accumulateTwoPhaseListeners(\n const listener = listenersArr[i];\n const {callback, capture, type} = listener;\n if (type === targetType) {\n- if (capture === true) {\n- capturePhase.push(\n+ if (capture && inCapturePhase) {\n+ phase.push(\n createDispatchQueueItemPhaseEntry(\n instance,\n callback,\n lastCurrentTarget,\n ),\n );\n- } else {\n- bubblePhase.push(\n- createDispatchQueueItemPhaseEntry(\n- instance,\n- callback,\n- lastCurrentTarget,\n- ),\n+ } else if (!capture) {\n+ const entry = createDispatchQueueItemPhaseEntry(\n+ instance,\n+ callback,\n+ lastCurrentTarget,\n );\n+ if (shouldEmulateTwoPhase) {\n+ phase.unshift(entry);\n+ } else if (!inCapturePhase) {\n+ phase.push(entry);\n+ }\n }\n }\n }\n@@ -753,10 +810,64 @@ export function accumulateTwoPhaseListeners(\n }\n instance = instance.return;\n }\n- if (capturePhase.length !== 0 || bubblePhase.length !== 0) {\n- dispatchQueue.push(\n- createDispatchQueueItem(event, capturePhase, bubblePhase),\n- );\n+ if (phase.length !== 0) {\n+ dispatchQueue.push(createDispatchQueueItem(event, phase));\n+ }\n+}\n+\n+\/\/ We should only use this function for:\n+\/\/ - ModernBeforeInputEventPlugin\n+\/\/ - ModernChangeEventPlugin\n+\/\/ - ModernSelectEventPlugin\n+\/\/ This is because we only process these plugins\n+\/\/ in the bubble phase, so we need to accumulate two\n+\/\/ phase event listeners (via emulation).\n+export function accumulateTwoPhaseListeners(\n+ targetFiber: Fiber | null,\n+ dispatchQueue: DispatchQueue,\n+ event: ReactSyntheticEvent,\n+): void {\n+ const bubbled = event._reactName;\n+ const captured = bubbled !== null ? bubbled + 'Capture' : null;\n+ const phase: DispatchQueueItemPhase = [];\n+ let instance = targetFiber;\n+\n+ \/\/ Accumulate all instances and listeners via the target -> root path.\n+ while (instance !== null) {\n+ const {stateNode, tag} = instance;\n+ \/\/ Handle listeners that are on HostComponents (i.e.

)\n+ if (tag === HostComponent && stateNode !== null) {\n+ const currentTarget = stateNode;\n+ \/\/ Standard React on* listeners, i.e. onClick prop\n+ if (captured !== null) {\n+ const captureListener = getListener(instance, captured);\n+ if (captureListener != null) {\n+ phase.unshift(\n+ createDispatchQueueItemPhaseEntry(\n+ instance,\n+ captureListener,\n+ currentTarget,\n+ ),\n+ );\n+ }\n+ }\n+ if (bubbled !== null) {\n+ const bubbleListener = getListener(instance, bubbled);\n+ if (bubbleListener != null) {\n+ phase.push(\n+ createDispatchQueueItemPhaseEntry(\n+ instance,\n+ bubbleListener,\n+ currentTarget,\n+ ),\n+ );\n+ }\n+ }\n+ }\n+ instance = instance.return;\n+ }\n+ if (phase.length !== 0) {\n+ dispatchQueue.push(createDispatchQueueItem(event, phase));\n }\n }\n \n@@ -829,8 +940,7 @@ function accumulateEnterLeaveListenersForEvent(\n if (registrationName === undefined) {\n return;\n }\n- const capturePhase: DispatchQueueItemPhase = [];\n- const bubblePhase: DispatchQueueItemPhase = [];\n+ const phase: DispatchQueueItemPhase = [];\n \n let instance = target;\n while (instance !== null) {\n@@ -846,7 +956,7 @@ function accumulateEnterLeaveListenersForEvent(\n if (capture) {\n const captureListener = getListener(instance, registrationName);\n if (captureListener != null) {\n- capturePhase.push(\n+ phase.unshift(\n createDispatchQueueItemPhaseEntry(\n instance,\n captureListener,\n@@ -854,10 +964,10 @@ function accumulateEnterLeaveListenersForEvent(\n ),\n );\n }\n- } else {\n+ } else if (!capture) {\n const bubbleListener = getListener(instance, registrationName);\n if (bubbleListener != null) {\n- bubblePhase.push(\n+ phase.push(\n createDispatchQueueItemPhaseEntry(\n instance,\n bubbleListener,\n@@ -869,14 +979,17 @@ function accumulateEnterLeaveListenersForEvent(\n }\n instance = instance.return;\n }\n- if (capturePhase.length !== 0 || bubblePhase.length !== 0) {\n- dispatchQueue.push(\n- createDispatchQueueItem(event, capturePhase, bubblePhase),\n- );\n+ if (phase.length !== 0) {\n+ dispatchQueue.push(createDispatchQueueItem(event, phase));\n }\n }\n \n-export function accumulateEnterLeaveListeners(\n+\/\/ We should only use this function for:\n+\/\/ - ModernEnterLeaveEventPlugin\n+\/\/ This is because we only process this plugin\n+\/\/ in the bubble phase, so we need to accumulate two\n+\/\/ phase event listeners.\n+export function accumulateEnterLeaveTwoPhaseListeners(\n dispatchQueue: DispatchQueue,\n leaveEvent: ReactSyntheticEvent,\n enterEvent: null | ReactSyntheticEvent,\n@@ -911,8 +1024,7 @@ export function accumulateEventHandleTargetListeners(\n currentTarget: EventTarget,\n inCapturePhase: boolean,\n ): void {\n- const capturePhase: DispatchQueueItemPhase = [];\n- const bubblePhase: DispatchQueueItemPhase = [];\n+ const phase: DispatchQueueItemPhase = [];\n \n const eventListeners = getEventHandlerListeners(currentTarget);\n if (eventListeners !== null) {\n@@ -924,21 +1036,19 @@ export function accumulateEventHandleTargetListeners(\n const {callback, capture, type} = listener;\n if (type === targetType) {\n if (inCapturePhase && capture) {\n- capturePhase.push(\n+ phase.push(\n createDispatchQueueItemPhaseEntry(null, callback, currentTarget),\n );\n } else if (!inCapturePhase && !capture) {\n- bubblePhase.push(\n+ phase.push(\n createDispatchQueueItemPhaseEntry(null, callback, currentTarget),\n );\n }\n }\n }\n }\n- if (capturePhase.length !== 0 || bubblePhase.length !== 0) {\n- dispatchQueue.push(\n- createDispatchQueueItem(event, capturePhase, bubblePhase),\n- );\n+ if (phase.length !== 0) {\n+ dispatchQueue.push(createDispatchQueueItem(event, phase));\n }\n }\n \ndiff --git a\/packages\/react-dom\/src\/events\/PluginModuleType.js b\/packages\/react-dom\/src\/events\/PluginModuleType.js\nindex a9102a48c9..f8f20995b6 100644\n--- a\/packages\/react-dom\/src\/events\/PluginModuleType.js\n+++ b\/packages\/react-dom\/src\/events\/PluginModuleType.js\n@@ -26,8 +26,7 @@ export type DispatchQueueItemPhase = Array;\n \n export type DispatchQueueItem = {|\n event: ReactSyntheticEvent,\n- capture: DispatchQueueItemPhase,\n- bubble: DispatchQueueItemPhase,\n+ phase: DispatchQueueItemPhase,\n |};\n \n export type DispatchQueue = Array;\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 195d6df3e5..2ebdfa03de 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@@ -189,9 +189,9 @@ describe('DOMModernPluginEventSystem', () => {\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[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 \n@@ -241,9 +241,9 @@ describe('DOMModernPluginEventSystem', () => {\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[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 \n@@ -320,9 +320,9 @@ describe('DOMModernPluginEventSystem', () => {\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[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 \/\/ Inside \n@@ -330,9 +330,9 @@ describe('DOMModernPluginEventSystem', () => {\n dispatchClickEvent(buttonElement2);\n expect(onClick).toHaveBeenCalledTimes(5);\n expect(onClickCapture).toHaveBeenCalledTimes(5);\n- expect(log[6]).toEqual(['capture', buttonElement2]);\n- expect(log[7]).toEqual(['bubble', buttonElement2]);\n- expect(log[8]).toEqual(['capture', buttonElement]);\n+ expect(log[6]).toEqual(['capture', buttonElement]);\n+ expect(log[7]).toEqual(['capture', buttonElement2]);\n+ expect(log[8]).toEqual(['bubble', buttonElement2]);\n expect(log[9]).toEqual(['bubble', buttonElement]);\n });\n \n@@ -385,9 +385,9 @@ describe('DOMModernPluginEventSystem', () => {\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[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 \n@@ -442,9 +442,9 @@ describe('DOMModernPluginEventSystem', () => {\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[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 \n@@ -757,7 +757,7 @@ describe('DOMModernPluginEventSystem', () => {\n const divElement = divRef.current;\n dispatchClickEvent(divElement);\n expect(onClick).toHaveBeenCalledTimes(1);\n- expect(onClickCapture).toHaveBeenCalledTimes(1);\n+ expect(onClickCapture).toHaveBeenCalledTimes(3);\n \n document.body.removeChild(portalElement);\n });\n@@ -1179,7 +1179,7 @@ describe('DOMModernPluginEventSystem', () => {\n if (enableLegacyFBSupport) {\n \/\/ We aren't using roots with legacyFBSupport, we put clicks on the document, so we exbit the previous\n \/\/ behavior.\n- expect(log).toEqual([]);\n+ expect(log).toEqual(['capture root', 'capture portal']);\n } else {\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@@ -2288,8 +2288,8 @@ describe('DOMModernPluginEventSystem', () => {\n if (enableLegacyFBSupport) {\n expect(log[0]).toEqual(['capture', window]);\n expect(log[1]).toEqual(['capture', document]);\n- expect(log[2]).toEqual(['bubble', document]);\n- expect(log[3]).toEqual(['capture', buttonElement]);\n+ expect(log[2]).toEqual(['capture', buttonElement]);\n+ expect(log[3]).toEqual(['bubble', document]);\n expect(log[4]).toEqual(['bubble', buttonElement]);\n expect(log[5]).toEqual(['bubble', window]);\n } else {\n@@ -2313,9 +2313,9 @@ describe('DOMModernPluginEventSystem', () => {\n if (enableLegacyFBSupport) {\n expect(log[0]).toEqual(['capture', window]);\n expect(log[1]).toEqual(['capture', document]);\n- expect(log[2]).toEqual(['bubble', document]);\n- expect(log[3]).toEqual(['capture', buttonElement]);\n- expect(log[4]).toEqual(['capture', divElement]);\n+ expect(log[2]).toEqual(['capture', buttonElement]);\n+ expect(log[3]).toEqual(['capture', divElement]);\n+ expect(log[4]).toEqual(['bubble', document]);\n expect(log[5]).toEqual(['bubble', divElement]);\n expect(log[6]).toEqual(['bubble', buttonElement]);\n expect(log[7]).toEqual(['bubble', window]);\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js\nindex 70459b175d..ce9b87ba6b 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernChangeEventPlugin.js\n@@ -36,7 +36,7 @@ import {enqueueStateRestore} from '..\/ReactDOMControlledComponent';\n import {disableInputAttributeSyncing} from 'shared\/ReactFeatureFlags';\n import {batchedUpdates} from '..\/ReactDOMUpdateBatching';\n import {\n- dispatchEventsInBatch,\n+ processDispatchQueue,\n accumulateTwoPhaseListeners,\n } from '..\/DOMModernPluginEventSystem';\n \n@@ -106,7 +106,7 @@ function manualDispatchChangeEvent(nativeEvent) {\n }\n \n function runEventInBatch(dispatchQueue) {\n- dispatchEventsInBatch(dispatchQueue);\n+ processDispatchQueue(dispatchQueue, 0);\n }\n \n function getInstIfValueChanged(targetInst: Object) {\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js\nindex a5cce2b7f9..d06102b6d6 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernEnterLeaveEventPlugin.js\n@@ -19,7 +19,7 @@ import {\n getClosestInstanceFromNode,\n getNodeFromInstance,\n } from '..\/..\/client\/ReactDOMComponentTree';\n-import {accumulateEnterLeaveListeners} from '..\/DOMModernPluginEventSystem';\n+import {accumulateEnterLeaveTwoPhaseListeners} from '..\/DOMModernPluginEventSystem';\n \n import {HostComponent, HostText} from 'react-reconciler\/src\/ReactWorkTags';\n import {getNearestMountedFiber} from 'react-reconciler\/src\/ReactFiberTreeReflection';\n@@ -159,7 +159,7 @@ function extractEvents(\n enter = null;\n }\n \n- accumulateEnterLeaveListeners(dispatchQueue, leave, enter, from, to);\n+ accumulateEnterLeaveTwoPhaseListeners(dispatchQueue, leave, enter, from, to);\n }\n \n export {registerEvents, extractEvents};\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js b\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js\nindex be6731082c..44daae1c50 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/ModernSimpleEventPlugin.js\n@@ -23,7 +23,7 @@ import {\n registerSimpleEvents,\n } from '..\/DOMEventProperties';\n import {\n- accumulateTwoPhaseListeners,\n+ accumulateSinglePhaseListeners,\n accumulateEventHandleTargetListeners,\n } from '..\/DOMModernPluginEventSystem';\n import {IS_TARGET_PHASE_ONLY} from '..\/EventSystemFlags';\n@@ -152,13 +152,13 @@ function extractEvents(\n nativeEventTarget,\n );\n \n+ const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;\n if (\n enableCreateEventHandleAPI &&\n eventSystemFlags !== undefined &&\n eventSystemFlags & IS_TARGET_PHASE_ONLY &&\n targetContainer != null\n ) {\n- const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;\n accumulateEventHandleTargetListeners(\n dispatchQueue,\n event,\n@@ -166,7 +166,13 @@ function extractEvents(\n inCapturePhase,\n );\n } else {\n- accumulateTwoPhaseListeners(targetInst, dispatchQueue, event, true);\n+ \/\/ We traverse only capture or bubble phase listeners\n+ accumulateSinglePhaseListeners(\n+ targetInst,\n+ dispatchQueue,\n+ event,\n+ inCapturePhase,\n+ );\n }\n return event;\n }\ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernChangeEventPlugin-test.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernChangeEventPlugin-test.js\nindex 3c3290bfe2..9f80e7329c 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernChangeEventPlugin-test.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernChangeEventPlugin-test.js\n@@ -98,6 +98,30 @@ describe('ChangeEventPlugin', () => {\n }\n });\n \n+ it('should consider initial text value to be current (capture)', () => {\n+ let called = 0;\n+\n+ function cb(e) {\n+ called++;\n+ expect(e.type).toBe('change');\n+ }\n+\n+ const node = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+ node.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));\n+ node.dispatchEvent(new Event('change', {bubbles: true, cancelable: true}));\n+\n+ if (ReactFeatureFlags.disableInputAttributeSyncing) {\n+ \/\/ TODO: figure out why. This might be a bug.\n+ expect(called).toBe(1);\n+ } else {\n+ \/\/ There should be no React change events because the value stayed the same.\n+ expect(called).toBe(0);\n+ }\n+ });\n+\n it('should consider initial checkbox checked=true to be current', () => {\n let called = 0;\n \ndiff --git a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernSelectEventPlugin-test.js b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernSelectEventPlugin-test.js\nindex fc1383d8f5..538f3be346 100644\n--- a\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernSelectEventPlugin-test.js\n+++ b\/packages\/react-dom\/src\/events\/plugins\/__tests__\/ModernSelectEventPlugin-test.js\n@@ -108,6 +108,40 @@ describe('SelectEventPlugin', () => {\n expect(select).toHaveBeenCalledTimes(1);\n });\n \n+ it('should fire `onSelectCapture` when a listener is present', () => {\n+ const select = jest.fn();\n+ const onSelectCapture = event => {\n+ expect(typeof event).toBe('object');\n+ expect(event.type).toBe('select');\n+ expect(event.target).toBe(node);\n+ select(event.currentTarget);\n+ };\n+\n+ const node = ReactDOM.render(\n+ ,\n+ container,\n+ );\n+ node.focus();\n+\n+ let nativeEvent = new MouseEvent('focus', {\n+ bubbles: true,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(nativeEvent);\n+ expect(select).toHaveBeenCalledTimes(0);\n+\n+ nativeEvent = new MouseEvent('mousedown', {\n+ bubbles: true,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(nativeEvent);\n+ expect(select).toHaveBeenCalledTimes(0);\n+\n+ nativeEvent = new MouseEvent('mouseup', {bubbles: true, cancelable: true});\n+ node.dispatchEvent(nativeEvent);\n+ expect(select).toHaveBeenCalledTimes(1);\n+ });\n+\n \/\/ Regression test for https:\/\/github.com\/facebook\/react\/issues\/11379\n it('should not wait for `mouseup` after receiving `dragend`', () => {\n const select = jest.fn();\ndiff --git a\/packages\/react-native-renderer\/src\/legacy-events\/PluginModuleType.js b\/packages\/react-native-renderer\/src\/legacy-events\/PluginModuleType.js\nindex 7f29ccc642..b7d2e32520 100644\n--- a\/packages\/react-native-renderer\/src\/legacy-events\/PluginModuleType.js\n+++ b\/packages\/react-native-renderer\/src\/legacy-events\/PluginModuleType.js\n@@ -45,8 +45,7 @@ export type DispatchQueueItemPhase = Array;\n \n export type DispatchQueueItem = {|\n event: ReactSyntheticEvent,\n- capture: DispatchQueueItemPhase,\n- bubble: DispatchQueueItemPhase,\n+ phase: DispatchQueueItemPhase,\n |};\n \n export type DispatchQueue = Array;\n","body":"","parents":["e18fb91852cc9386abc234c660f4c03903a4d663"]}

dillon1000/react

Files changed