diff --git a/packages/legacy-events/EventSystemFlags.js b/packages/legacy-events/EventSystemFlags.js index 1ad8aa01c251..a3d51f3197b7 100644 --- a/packages/legacy-events/EventSystemFlags.js +++ b/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; diff --git a/packages/react-dom/src/events/EnterLeaveEventPlugin.js b/packages/react-dom/src/events/EnterLeaveEventPlugin.js index 300772410c60..de9b130462fb 100644 --- a/packages/react-dom/src/events/EnterLeaveEventPlugin.js +++ b/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]; }, diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js index 08c8962ec418..bb7450c45a5e 100644 --- a/packages/react-dom/src/events/ReactDOMEventListener.js +++ b/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, ); } }