Delegated all capture events (#19463)
Dominic Gannaway committed
Jul 27, 2020 at 15:36 UTC
6bb86fd1629896019dfaa9c6ea6e0680913820a7
2 files changed
+13
-19
packages/react-dom/src/events/DOMPluginEventSystem.js
+9
-3
@@ -373,9 +373,15 @@ export function listenToNativeEvent(
373
if (topLevelType === TOP_SELECTION_CHANGE) {
374
target = (rootContainerElement: any).ownerDocument;
375
}
376
- // If the event can be delegated, we can register it to the root container.
377
- // Otherwise, we should register the event to the target element.
378
- if (targetElement !== null && nonDelegatedEvents.has(topLevelType)) {
376
+ // If the event can be delegated (or is capture phase), we can
377
+ // register it to the root container. Otherwise, we should
378
+ // register the event to the target element and mark it as
379
+ // a non-delegated event.
380
+ if (
381
+ targetElement !== null &&
382
+ !isCapturePhaseListener &&
383
+ nonDelegatedEvents.has(topLevelType)
384
+ ) {
385
eventSystemFlags |= IS_NON_DELEGATED;
386
target = targetElement;
387
}
packages/react-dom/src/events/plugins/SimpleEventPlugin.js
+4
-16
@@ -40,10 +40,9 @@ import {
40
import {IS_EVENT_HANDLE_NON_MANAGED_NODE} from '../EventSystemFlags';
41
42
import getEventCharCode from '../getEventCharCode';
43
-import {IS_CAPTURE_PHASE, IS_NON_DELEGATED} from '../EventSystemFlags';
43
+import {IS_CAPTURE_PHASE} from '../EventSystemFlags';
44
45
import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
46
-import {getClosestInstanceFromNode} from '../../client/ReactDOMComponentTree';
46
47
function extractEvents(
48
dispatchQueue: DispatchQueue,
@@ -166,22 +165,11 @@ function extractEvents(
165
inCapturePhase,
166
);
167
} else {
169
- // When we encounter a non-delegated event in the capture phase,
170
- // we shouldn't emuluate capture bubbling. This is because we'll
171
- // add a native capture event listener to each element directly,
172
- // not the root, and native capture listeners always fire even
173
- // if the event doesn't bubble.
174
- const isNonDelegatedEvent = (eventSystemFlags & IS_NON_DELEGATED) !== 0;
168
// TODO: We may also want to re-use the accumulateTargetOnly flag to
169
// special case bubbling for onScroll/media events at a later point.
177
- const accumulateTargetOnly = inCapturePhase && isNonDelegatedEvent;
178
- // If we are not handling accumulateTargetOnly, then we should traverse
179
- // through all React fiber tree, finding all relevant useEvent and
180
- // on* prop events as we traverse the tree. Otherwise, we should
181
- // only handle the target fiber and stop traversal straight after.
182
- if (accumulateTargetOnly) {
183
- targetInst = getClosestInstanceFromNode(((targetContainer: any): Node));
184
- }
170
+ // In which case we will want to make this flag boolean and ensure
171
+ // we change the targetInst to be of the container instance. Like:
172
+ const accumulateTargetOnly = false;
173
174
// We traverse only capture or bubble phase listeners
175
accumulateSinglePhaseListeners(