{"patch":"diff --git a\/packages\/legacy-events\/EventSystemFlags.js b\/packages\/legacy-events\/EventSystemFlags.js\nindex e31af6bae3..585519c117 100644\n--- a\/packages\/legacy-events\/EventSystemFlags.js\n+++ b\/packages\/legacy-events\/EventSystemFlags.js\n@@ -11,10 +11,10 @@ export type EventSystemFlags = number;\n \n export const PLUGIN_EVENT_SYSTEM = 1;\n export const RESPONDER_EVENT_SYSTEM = 1 << 1;\n-export const IS_PASSIVE = 1 << 2;\n-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 IS_TARGET_EVENT_ONLY = 1 << 7;\n+export const USE_EVENT_SYSTEM = 1 << 2;\n+export const IS_TARGET_PHASE_ONLY = 1 << 3;\n+export const IS_PASSIVE = 1 << 4;\n+export const PASSIVE_NOT_SUPPORTED = 1 << 5;\n+export const IS_REPLAYED = 1 << 6;\n+export const IS_FIRST_ANCESTOR = 1 << 7;\n export const LEGACY_FB_SUPPORT = 1 << 8;\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOM-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOM-test.js\nindex c43ae76dc4..d8a6c6d2ff 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOM-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOM-test.js\n@@ -13,6 +13,7 @@ let React;\n let ReactDOM;\n let ReactDOMServer;\n let ReactTestUtils;\n+const ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n \n describe('ReactDOM', () => {\n beforeEach(() => {\n@@ -354,11 +355,31 @@ describe('ReactDOM', () => {\n document.body.appendChild(container);\n try {\n ReactDOM.render(, container);\n+ let expected;\n+\n+ if (\n+ ReactFeatureFlags.enableModernEventSystem &\n+ ReactFeatureFlags.enableLegacyFBSupport\n+ ) {\n+ \/\/ We expect to duplicate the 2nd handler because this test is\n+ \/\/ not really designed around how the legacy FB support system works.\n+ \/\/ This is because the above test sync fires a click() event\n+ \/\/ during that of another click event, which causes the FB support system\n+ \/\/ to duplicate adding an event listener. In practice this would never\n+ \/\/ happen, as we only apply the legacy FB logic for \"click\" events,\n+ \/\/ which would never stack this way in product code.\n+ expected = [\n+ '1st node clicked',\n+ \"2nd node clicked imperatively from 1st's handler\",\n+ \"2nd node clicked imperatively from 1st's handler\",\n+ ];\n+ } else {\n+ expected = [\n+ '1st node clicked',\n+ \"2nd node clicked imperatively from 1st's handler\",\n+ ];\n+ }\n \n- const expected = [\n- '1st node clicked',\n- \"2nd node clicked imperatively from 1st's handler\",\n- ];\n expect(actual).toEqual(expected);\n } finally {\n document.body.removeChild(container);\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js\nindex 49dc7a3b3c..d7e856f1a7 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js\n@@ -14,6 +14,7 @@ describe('ReactDOMComponent', () => {\n let ReactTestUtils;\n let ReactDOM;\n let ReactDOMServer;\n+ const ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n \n function normalizeCodeLocInfo(str) {\n return str && str.replace(\/\\(at .+?:\\d+\\)\/g, '(at **)');\n@@ -2595,14 +2596,30 @@ describe('ReactDOMComponent', () => {\n \/\/ might depend on this.\n \/\/\n \/\/ @see https:\/\/github.com\/facebook\/react\/pull\/12919#issuecomment-395224674\n- expect(eventOrder).toEqual([\n- 'document capture',\n- 'inner capture',\n- 'inner bubble',\n- 'outer capture',\n- 'outer bubble',\n- 'document bubble',\n- ]);\n+ if (\n+ ReactFeatureFlags.enableModernEventSystem &\n+ ReactFeatureFlags.enableLegacyFBSupport\n+ ) {\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+ 'inner capture',\n+ 'inner bubble',\n+ 'outer capture',\n+ 'outer bubble',\n+ ]);\n+ } else {\n+ expect(eventOrder).toEqual([\n+ 'document capture',\n+ 'inner capture',\n+ 'inner bubble',\n+ 'outer capture',\n+ 'outer bubble',\n+ 'document bubble',\n+ ]);\n+ }\n } finally {\n document.body.removeChild(container);\n }\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex 3927e3b61c..a8dae35dc8 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -76,6 +76,8 @@ import {HostComponent} from 'react-reconciler\/src\/ReactWorkTags';\n import {\n RESPONDER_EVENT_SYSTEM,\n IS_PASSIVE,\n+ PLUGIN_EVENT_SYSTEM,\n+ USE_EVENT_SYSTEM,\n } from 'legacy-events\/EventSystemFlags';\n import {\n isManagedDOMElement,\n@@ -1156,6 +1158,7 @@ export function registerEvent(\n type,\n rootContainerInstance,\n listenerMap,\n+ PLUGIN_EVENT_SYSTEM | USE_EVENT_SYSTEM,\n passive,\n priority,\n );\ndiff --git a\/packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js b\/packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js\nindex 412d2c94aa..7a76374160 100644\n--- a\/packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js\n@@ -21,7 +21,10 @@ import {\n HostComponent,\n HostText,\n } from 'react-reconciler\/src\/ReactWorkTags';\n-import {IS_FIRST_ANCESTOR} from 'legacy-events\/EventSystemFlags';\n+import {\n+ IS_FIRST_ANCESTOR,\n+ PLUGIN_EVENT_SYSTEM,\n+} from 'legacy-events\/EventSystemFlags';\n import {batchedEventUpdates} from 'legacy-events\/ReactGenericBatching';\n import {runEventsInBatch} from 'legacy-events\/EventBatching';\n import {plugins} from 'legacy-events\/EventPluginRegistry';\n@@ -372,7 +375,12 @@ export function legacyTrapBubbledEvent(\n element: Document | Element,\n listenerMap?: ElementListenerMap,\n ): void {\n- const listener = addTrappedEventListener(element, topLevelType, false);\n+ const listener = addTrappedEventListener(\n+ element,\n+ topLevelType,\n+ PLUGIN_EVENT_SYSTEM,\n+ false,\n+ );\n if (listenerMap) {\n listenerMap.set(topLevelType, {passive: undefined, listener});\n }\n@@ -383,6 +391,11 @@ export function legacyTrapCapturedEvent(\n element: Document | Element,\n listenerMap: ElementListenerMap,\n ): void {\n- const listener = addTrappedEventListener(element, topLevelType, true);\n+ const listener = addTrappedEventListener(\n+ element,\n+ topLevelType,\n+ PLUGIN_EVENT_SYSTEM,\n+ true,\n+ );\n listenerMap.set(topLevelType, {passive: undefined, listener});\n }\ndiff --git a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\nindex 0816640e53..f5419c5a13 100644\n--- a\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js\n@@ -28,9 +28,11 @@ import {batchedEventUpdates} from 'legacy-events\/ReactGenericBatching';\n import {executeDispatchesInOrder} from 'legacy-events\/EventPluginUtils';\n import {plugins} from 'legacy-events\/EventPluginRegistry';\n import {\n+ PLUGIN_EVENT_SYSTEM,\n LEGACY_FB_SUPPORT,\n IS_REPLAYED,\n- IS_TARGET_EVENT_ONLY,\n+ IS_TARGET_PHASE_ONLY,\n+ USE_EVENT_SYSTEM,\n } from 'legacy-events\/EventSystemFlags';\n \n import {HostRoot, HostPortal} from 'react-reconciler\/src\/ReactWorkTags';\n@@ -229,6 +231,7 @@ export function listenToTopLevelEvent(\n topLevelType: DOMTopLevelEventType,\n targetContainer: EventTarget,\n listenerMap: ElementListenerMap,\n+ eventSystemFlags: EventSystemFlags,\n passive?: boolean,\n priority?: EventPriority,\n capture?: boolean,\n@@ -265,6 +268,7 @@ export function listenToTopLevelEvent(\n const listener = addTrappedEventListener(\n targetContainer,\n topLevelType,\n+ eventSystemFlags,\n isCapturePhase,\n false,\n passive,\n@@ -283,7 +287,12 @@ export function listenToEvent(\n \n for (let i = 0; i < dependencies.length; i++) {\n const dependency = dependencies[i];\n- listenToTopLevelEvent(dependency, rootContainerElement, listenerMap);\n+ listenToTopLevelEvent(\n+ dependency,\n+ rootContainerElement,\n+ listenerMap,\n+ PLUGIN_EVENT_SYSTEM,\n+ );\n }\n }\n \n@@ -301,6 +310,7 @@ function willDeferLaterForLegacyFBSupport(\n addTrappedEventListener(\n targetContainer,\n topLevelType,\n+ PLUGIN_EVENT_SYSTEM | LEGACY_FB_SUPPORT,\n false,\n isDeferredListenerForLegacyFBSupport,\n );\n@@ -343,10 +353,9 @@ export function dispatchEventForPluginEventSystem(\n ): void {\n let ancestorInst = targetInst;\n if (targetContainer !== null) {\n- if (eventTargetEventListenerStore.has(targetContainer)) {\n+ if (eventSystemFlags & IS_TARGET_PHASE_ONLY) {\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@@ -362,6 +371,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 want to apply the legacy FB support for the useEvent API.\n+ (eventSystemFlags & USE_EVENT_SYSTEM) === 0 &&\n willDeferLaterForLegacyFBSupport(topLevelType, targetContainer)\n ) {\n return;\n@@ -483,6 +494,7 @@ export function attachListenerToManagedDOMElement(\n type,\n containerEventTarget,\n listenerMap,\n+ PLUGIN_EVENT_SYSTEM | USE_EVENT_SYSTEM,\n passive,\n priority,\n );\n@@ -522,6 +534,7 @@ export function attachTargetEventListener(listener: ReactDOMListener): void {\n type,\n eventTarget,\n listenerMap,\n+ PLUGIN_EVENT_SYSTEM | USE_EVENT_SYSTEM | IS_TARGET_PHASE_ONLY,\n passive,\n priority,\n capture,\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\nindex 02336d66cb..4b1bfd3830 100644\n--- a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n@@ -37,12 +37,11 @@ import {\n import {HostRoot, SuspenseComponent} from 'react-reconciler\/src\/ReactWorkTags';\n import {\n type EventSystemFlags,\n+ LEGACY_FB_SUPPORT,\n PLUGIN_EVENT_SYSTEM,\n RESPONDER_EVENT_SYSTEM,\n IS_PASSIVE,\n- IS_ACTIVE,\n PASSIVE_NOT_SUPPORTED,\n- LEGACY_FB_SUPPORT,\n } from 'legacy-events\/EventSystemFlags';\n \n import {\n@@ -103,12 +102,9 @@ export function addResponderEventSystemEvent(\n if (passiveBrowserEventsSupported) {\n eventFlags |= IS_PASSIVE;\n } else {\n- eventFlags |= IS_ACTIVE;\n eventFlags |= PASSIVE_NOT_SUPPORTED;\n passive = false;\n }\n- } else {\n- eventFlags |= IS_ACTIVE;\n }\n \/\/ Check if interactive and wrap in discreteUpdates\n const listener = dispatchEvent.bind(\n@@ -132,6 +128,7 @@ export function addResponderEventSystemEvent(\n export function addTrappedEventListener(\n targetContainer: EventTarget,\n topLevelType: DOMTopLevelEventType,\n+ eventSystemFlags: EventSystemFlags,\n capture: boolean,\n isDeferredListenerForLegacyFBSupport?: boolean,\n passive?: boolean,\n@@ -160,10 +157,6 @@ export function addTrappedEventListener(\n if (passive === true && !passiveBrowserEventsSupported) {\n passive = false;\n }\n- const eventSystemFlags =\n- enableLegacyFBSupport && isDeferredListenerForLegacyFBSupport\n- ? PLUGIN_EVENT_SYSTEM | LEGACY_FB_SUPPORT\n- : PLUGIN_EVENT_SYSTEM;\n \n listener = listenerWrapper.bind(\n null,\n@@ -268,7 +261,14 @@ function dispatchDiscreteEvent(\n container,\n nativeEvent,\n ) {\n- flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);\n+ if (\n+ !enableLegacyFBSupport ||\n+ \/\/ If we have Legacy FB support, it means we've already\n+ \/\/ flushed for this event and we don't need to do it again.\n+ (eventSystemFlags & LEGACY_FB_SUPPORT) === 0\n+ ) {\n+ flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);\n+ }\n discreteUpdates(\n dispatchEvent,\n topLevelType,\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js b\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\nindex 4dc3874a20..9e39586ecf 100644\n--- a\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js\n@@ -118,7 +118,7 @@ import {\n TOP_FOCUS,\n TOP_BLUR,\n } from '.\/DOMTopLevelEventTypes';\n-import {IS_REPLAYED} from 'legacy-events\/EventSystemFlags';\n+import {IS_REPLAYED, PLUGIN_EVENT_SYSTEM} from 'legacy-events\/EventSystemFlags';\n import {legacyListenToTopLevelEvent} from '.\/DOMLegacyEventPluginSystem';\n import {listenToTopLevelEvent} from '.\/DOMModernPluginEventSystem';\n \n@@ -219,7 +219,12 @@ function trapReplayableEventForContainer(\n container: Container,\n listenerMap: ElementListenerMap,\n ) {\n- listenToTopLevelEvent(topLevelType, ((container: any): Element), listenerMap);\n+ listenToTopLevelEvent(\n+ topLevelType,\n+ ((container: any): Element),\n+ listenerMap,\n+ PLUGIN_EVENT_SYSTEM,\n+ );\n }\n \n function trapReplayableEventForDocument(\ndiff --git a\/packages\/react-dom\/src\/events\/SimpleEventPlugin.js b\/packages\/react-dom\/src\/events\/SimpleEventPlugin.js\nindex a2a0c9332f..f394c3dc75 100644\n--- a\/packages\/react-dom\/src\/events\/SimpleEventPlugin.js\n+++ b\/packages\/react-dom\/src\/events\/SimpleEventPlugin.js\n@@ -17,6 +17,7 @@ import type {PluginModule} from 'legacy-events\/PluginModuleType';\n import type {EventSystemFlags} from 'legacy-events\/EventSystemFlags';\n \n import SyntheticEvent from 'legacy-events\/SyntheticEvent';\n+import {IS_TARGET_PHASE_ONLY} from 'legacy-events\/EventSystemFlags';\n \n import * as DOMTopLevelEventTypes from '.\/DOMTopLevelEventTypes';\n import {\n@@ -38,7 +39,7 @@ import SyntheticWheelEvent from '.\/SyntheticWheelEvent';\n import getEventCharCode from '.\/getEventCharCode';\n import accumulateTwoPhaseListeners from '.\/accumulateTwoPhaseListeners';\n import accumulateEventTargetListeners from '.\/accumulateEventTargetListeners';\n-import {IS_TARGET_EVENT_ONLY} from 'legacy-events\/EventSystemFlags';\n+\n import {enableUseEventAPI} from 'shared\/ReactFeatureFlags';\n \n \/\/ Only used in DEV for exhaustiveness validation.\n@@ -210,7 +211,7 @@ const SimpleEventPlugin: PluginModule = {\n if (\n enableUseEventAPI &&\n eventSystemFlags !== undefined &&\n- eventSystemFlags & IS_TARGET_EVENT_ONLY &&\n+ eventSystemFlags & IS_TARGET_PHASE_ONLY &&\n targetContainer != null\n ) {\n accumulateEventTargetListeners(event, targetContainer);\n","commit":{"shortRevision":"d5e4b3ae1d","authoredAt":"2020-04-02T18:26:34+01:00","subject":"Modern Event System: refine flags and handling of enableLegacyFBSupport (#18466)","authorName":"Dominic Gannaway","revision":"d5e4b3ae1d5f7d76bb3894e8d814fd4ba19dcfd5","authorEmail":"trueadm@users.noreply.github.com"},"body":"","parents":["3966081cf2ffb75cde8239399176f98338511a35"],"files":[{"path":"packages\/legacy-events\/EventSystemFlags.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOM-test.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMComponent-test.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOMHostConfig.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/DOMLegacyEventPluginSystem.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/DOMModernPluginEventSystem.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/ReactDOMEventListener.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/ReactDOMEventReplaying.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/SimpleEventPlugin.js","status":"M"}]}

dillon1000/react

Files changed