Replay capture phase for continuous events

packages/react-dom/src/events/DOMPluginEventSystem.js

@@ -70,6 +70,7 @@ import * as ChangeEventPlugin from './plugins/ChangeEventPlugin';
 import * as EnterLeaveEventPlugin from './plugins/EnterLeaveEventPlugin';
 import * as SelectEventPlugin from './plugins/SelectEventPlugin';
 import * as SimpleEventPlugin from './plugins/SimpleEventPlugin';
+import {isReplayingEvent} from './replayedEvent';
 
 type DispatchListener = {|
  instance: null | Fiber,
@@ -557,7 +558,8 @@ export function dispatchEventForPluginEventSystem(
  // for legacy FB support, where the expected behavior was to
  // match React < 16 behavior of delegated clicks to the doc.
  domEventName === 'click' &&
- (eventSystemFlags & SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE) === 0
+ (eventSystemFlags & SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE) === 0 &&
+ !isReplayingEvent(nativeEvent)
  ) {
  deferClickToDocumentForLegacyFBSupport(domEventName, targetContainer);
  return;

packages/react-dom/src/events/EventSystemFlags.js

@@ -13,11 +13,10 @@ export const IS_EVENT_HANDLE_NON_MANAGED_NODE = 1;
 export const IS_NON_DELEGATED = 1 << 1;
 export const IS_CAPTURE_PHASE = 1 << 2;
 export const IS_PASSIVE = 1 << 3;
-export const IS_REPLAYED = 1 << 4;
-export const IS_LEGACY_FB_SUPPORT_MODE = 1 << 5;
+export const IS_LEGACY_FB_SUPPORT_MODE = 1 << 4;
 
 export const SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE =
- IS_LEGACY_FB_SUPPORT_MODE | IS_REPLAYED | IS_CAPTURE_PHASE;
+ IS_LEGACY_FB_SUPPORT_MODE | IS_CAPTURE_PHASE;
 
 // We do not want to defer if the event system has already been
 // set to LEGACY_FB_SUPPORT. LEGACY_FB_SUPPORT only gets set when

packages/react-dom/src/events/ReactDOMEventListener.js

@@ -11,8 +11,11 @@ import type {AnyNativeEvent} from '../events/PluginModuleType';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
+import type {NullTarget} from './ReactDOMEventReplaying';
 import {enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay} from 'shared/ReactFeatureFlags';
 import {
+ nullTarget,
+ isBlocked,
  isDiscreteEventThatRequiresHydration,
  queueDiscreteEvent,
  hasQueuedDiscreteEvents,
@@ -155,13 +158,128 @@ export function dispatchEvent(
  return;
  }
 
+ if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
+ dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay(
+ domEventName,
+ eventSystemFlags,
+ targetContainer,
+ nativeEvent,
+ );
+ } else {
+ dispatchEventOriginal(
+ domEventName,
+ eventSystemFlags,
+ targetContainer,
+ nativeEvent,
+ );
+ }
+}
+
+function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay(
+ domEventName: DOMEventName,
+ eventSystemFlags: EventSystemFlags,
+ targetContainer: EventTarget,
+ nativeEvent: AnyNativeEvent,
+) {
+ let blockedOn = findInstanceBlockingEvent(
+ domEventName,
+ eventSystemFlags,
+ targetContainer,
+ nativeEvent,
+ );
+
+ // We can dispatch the event now
+ let blockedOnInst = isBlocked(blockedOn);
+ if (!blockedOnInst) {
+ clearIfContinuousEvent(domEventName, nativeEvent);
+ dispatchEventForPluginEventSystem(
+ domEventName,
+ eventSystemFlags,
+ nativeEvent,
+ blockedOn === null
+ ? getClosestInstanceFromNode(getEventTarget(nativeEvent))
+ : null,
+ targetContainer,
+ );
+ return;
+ }
+
+ if (
+ queueIfContinuousEvent(
+ blockedOn,
+ domEventName,
+ eventSystemFlags,
+ targetContainer,
+ nativeEvent,
+ )
+ ) {
+ nativeEvent.stopPropagation();
+ return;
+ }
+ // We need to clear only if we didn't queue because
+ // queueing is accumulative.
+ clearIfContinuousEvent(domEventName, nativeEvent);
+
+ if (
+ eventSystemFlags & IS_CAPTURE_PHASE &&
+ isDiscreteEventThatRequiresHydration(domEventName)
+ ) {
+ while (blockedOnInst) {
+ const fiber = getInstanceFromNode(blockedOnInst);
+ if (fiber !== null) {
+ attemptSynchronousHydration(fiber);
+ }
+ const nextBlockedOn = findInstanceBlockingEvent(
+ domEventName,
+ eventSystemFlags,
+ targetContainer,
+ nativeEvent,
+ );
+ if (nextBlockedOn === blockedOn) {
+ break;
+ }
+ blockedOn = nextBlockedOn;
+ blockedOnInst = isBlocked(blockedOn);
+ }
+ if (blockedOnInst) {
+ nativeEvent.stopPropagation();
+ return;
+ }
+ dispatchEventForPluginEventSystem(
+ domEventName,
+ eventSystemFlags,
+ nativeEvent,
+ blockedOn === null
+ ? getClosestInstanceFromNode(getEventTarget(nativeEvent))
+ : null,
+ targetContainer,
+ );
+ return;
+ }
+
+ // This is not replayable so we'll invoke it but without a target,
+ // in case the event system needs to trace it.
+ dispatchEventForPluginEventSystem(
+ domEventName,
+ eventSystemFlags,
+ nativeEvent,
+ null,
+ targetContainer,
+ );
+}
+
+function dispatchEventOriginal(
+ domEventName: DOMEventName,
+ eventSystemFlags: EventSystemFlags,
+ targetContainer: EventTarget,
+ nativeEvent: AnyNativeEvent,
+) {
  // TODO: replaying capture phase events is currently broken
  // because we used to do it during top-level native bubble handlers
  // but now we use different bubble and capture handlers.
  // In eager mode, we attach capture listeners early, so we need
  // to filter them out until we fix the logic to handle them correctly.
  const allowReplay = (eventSystemFlags & IS_CAPTURE_PHASE) === 0;
-
  if (
  allowReplay &&
  hasQueuedDiscreteEvents() &&
@@ -180,14 +298,23 @@ export function dispatchEvent(
  return;
  }
 
- let blockedOn = attemptToDispatchEvent(
+ const blockedOn = findInstanceBlockingEvent(
  domEventName,
  eventSystemFlags,
  targetContainer,
  nativeEvent,
  );
-
- if (blockedOn === null) {
+ const blockedOnInst = isBlocked(blockedOn);
+ if (!blockedOnInst) {
+ dispatchEventForPluginEventSystem(
+ domEventName,
+ eventSystemFlags,
+ nativeEvent,
+ blockedOn === null
+ ? getClosestInstanceFromNode(getEventTarget(nativeEvent))
+ : null,
+ targetContainer,
+ );
  // We successfully dispatched this event.
  if (allowReplay) {
  clearIfContinuousEvent(domEventName, nativeEvent);
@@ -196,10 +323,7 @@ export function dispatchEvent(
  }
 
  if (allowReplay) {
- if (
- !enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
- isDiscreteEventThatRequiresHydration(domEventName)
- ) {
+ if (isDiscreteEventThatRequiresHydration(domEventName)) {
  // This this to be replayed later once the target is available.
  queueDiscreteEvent(
  blockedOn,
@@ -226,33 +350,6 @@ export function dispatchEvent(
  clearIfContinuousEvent(domEventName, nativeEvent);
  }
 
- if (
- enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
- eventSystemFlags & IS_CAPTURE_PHASE &&
- isDiscreteEventThatRequiresHydration(domEventName)
- ) {
- while (blockedOn !== null) {
- const fiber = getInstanceFromNode(blockedOn);
- if (fiber !== null) {
- attemptSynchronousHydration(fiber);
- }
- const nextBlockedOn = attemptToDispatchEvent(
- domEventName,
- eventSystemFlags,
- targetContainer,
- nativeEvent,
- );
- if (nextBlockedOn === blockedOn) {
- break;
- }
- blockedOn = nextBlockedOn;
- }
- if (blockedOn) {
- nativeEvent.stopPropagation();
- return;
- }
- }
-
  // This is not replayable so we'll invoke it but without a target,
  // in case the event system needs to trace it.
  dispatchEventForPluginEventSystem(
@@ -264,62 +361,55 @@ export function dispatchEvent(
  );
 }
 
-// Attempt dispatching an event. Returns a SuspenseInstance or Container if it's blocked.
-export function attemptToDispatchEvent(
+// Returns a SuspenseInstance or Container if it's blocked.
+// Returns null if not blocked and we should use closestInstance
+// Returns nullTarget if not blocked but we should dispatch without a targetInst
+export function findInstanceBlockingEvent(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  targetContainer: EventTarget,
  nativeEvent: AnyNativeEvent,
-): null | Container | SuspenseInstance {
+): NullTarget | null | Container | SuspenseInstance {
  // TODO: Warn if _enabled is false.
 
  const nativeEventTarget = getEventTarget(nativeEvent);
- let targetInst = getClosestInstanceFromNode(nativeEventTarget);
+ const targetInst = getClosestInstanceFromNode(nativeEventTarget);
 
  if (targetInst !== null) {
  const nearestMounted = getNearestMountedFiber(targetInst);
- if (nearestMounted === null) {
- // This tree has been unmounted already. Dispatch without a target.
- targetInst = null;
- } else {
+ if (nearestMounted !== null) {
  const tag = nearestMounted.tag;
  if (tag === SuspenseComponent) {
  const instance = getSuspenseInstanceFromFiber(nearestMounted);
  if (instance !== null) {
  // Queue the event to be replayed later. Abort dispatching since we
  // don't want this event dispatched twice through the event system.
- // TODO: If this is the first discrete event in the queue. Schedule an increased
- // priority for this boundary.
  return instance;
  }
  // This shouldn't happen, something went wrong but to avoid blocking
  // the whole system, dispatch the event without a target.
  // TODO: Warn.
- targetInst = null;
+ return nullTarget;
  } else if (tag === HostRoot) {
  const root: FiberRoot = nearestMounted.stateNode;
  if (root.isDehydrated) {
  // If this happens during a replay something went wrong and it might block
  // the whole system.
  return getContainerFromFiber(nearestMounted);
  }
- targetInst = null;
+ return nullTarget;
  } else if (nearestMounted !== targetInst) {
  // If we get an event (ex: img onload) before committing that
  // component's mount, ignore it for now (that is, treat it as if it was an
  // event on a non-React tree). We might also consider queueing events and
  // dispatching them after the mount.
- targetInst = null;
+ return nullTarget;
  }
+ } else {
+ // This tree has been unmounted already. Dispatch without a target.
+ return nullTarget;
  }
  }
- dispatchEventForPluginEventSystem(
- domEventName,
- eventSystemFlags,
- nativeEvent,
- targetInst,
- targetContainer,
- );
  // We're not blocked on anything.
  return null;
 }