[react-events] Remove lastNativeEvent in favor of SystemFlags (#17585)

packages/legacy-events/EventSystemFlags.js

@@ -15,3 +15,4 @@ export const IS_PASSIVE = 1 << 2;
 export const IS_ACTIVE = 1 << 3;
 export const PASSIVE_NOT_SUPPORTED = 1 << 4;
 export const IS_REPLAYED = 1 << 5;
+export const IS_FIRST_ANCESTOR = 1 << 6;

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

@@ -13,7 +13,7 @@ import {
   TOP_POINTER_OUT,
   TOP_POINTER_OVER,
 } from './DOMTopLevelEventTypes';
-import {IS_REPLAYED} from 'legacy-events/EventSystemFlags';
+import {IS_REPLAYED, IS_FIRST_ANCESTOR} from 'legacy-events/EventSystemFlags';
 import SyntheticMouseEvent from './SyntheticMouseEvent';
 import SyntheticPointerEvent from './SyntheticPointerEvent';
 import {
@@ -42,12 +42,6 @@ const eventTypes = {
   },
 };
 
-// We track the lastNativeEvent to ensure that when we encounter
-// cases where we process the same nativeEvent multiple times,
-// which can happen when have multiple ancestors, that we don't
-// duplicate enter
-let lastNativeEvent;
-
 const EnterLeaveEventPlugin = {
   eventTypes: eventTypes,
 
@@ -169,11 +163,12 @@ const EnterLeaveEventPlugin = {
 
     accumulateEnterLeaveDispatches(leave, enter, from, to);
 
-    if (nativeEvent === lastNativeEvent) {
-      lastNativeEvent = null;
+    // If we are not processing the first ancestor, then we
+    // should not process the same nativeEvent again, as we
+    // will have already processed it in the first ancestor.
+    if ((eventSystemFlags & IS_FIRST_ANCESTOR) === 0) {
       return [leave];
     }
-    lastNativeEvent = nativeEvent;
 
     return [leave, enter];
   },

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

@@ -49,6 +49,7 @@ import {
   IS_PASSIVE,
   IS_ACTIVE,
   PASSIVE_NOT_SUPPORTED,
+  IS_FIRST_ANCESTOR,
 } from 'legacy-events/EventSystemFlags';
 
 import {
@@ -175,13 +176,19 @@ function handleTopLevel(bookKeeping: BookKeepingInstance) {
     const eventTarget = getEventTarget(bookKeeping.nativeEvent);
     const topLevelType = ((bookKeeping.topLevelType: any): DOMTopLevelEventType);
     const nativeEvent = ((bookKeeping.nativeEvent: any): AnyNativeEvent);
+    let eventSystemFlags = bookKeeping.eventSystemFlags;
+
+    // If this is the first ancestor, we mark it on the system flags
+    if (i === 0) {
+      eventSystemFlags |= IS_FIRST_ANCESTOR;
+    }
 
     runExtractedPluginEventsInBatch(
       topLevelType,
       targetInst,
       nativeEvent,
       eventTarget,
-      bookKeeping.eventSystemFlags,
+      eventSystemFlags,
     );
   }
 }