diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js index 539d53b781c9..a75cb9799587 100644 --- a/packages/react-dom/src/client/ReactDOMComponent.js +++ b/packages/react-dom/src/client/ReactDOMComponent.js @@ -1355,10 +1355,6 @@ export function listenToEventResponderEventTypes( const targetEventType = isPassive ? eventType : eventType.substring(0, eventType.length - 7); - // We don't listen to this as we actually emulate it in the host config - if (targetEventType === 'beforeblur') { - continue; - } if (!listenerMap.has(eventKey)) { if (isPassive) { const activeKey = targetEventType + '_active'; diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index e7d28a2f02f6..e2e921123441 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom/src/client/ReactDOMHostConfig.js @@ -62,7 +62,6 @@ import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols'; import { mountEventResponder, unmountEventResponder, - DEPRECATED_dispatchEventForResponderEventSystem, } from '../events/DeprecatedDOMEventResponderSystem'; import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying'; @@ -74,8 +73,6 @@ import { enableScopeAPI, } from 'shared/ReactFeatureFlags'; import { - RESPONDER_EVENT_SYSTEM, - IS_PASSIVE, PLUGIN_EVENT_SYSTEM, USE_EVENT_SYSTEM, } from '../events/EventSystemFlags'; @@ -528,22 +525,9 @@ function createEvent(type: TopLevelType): Event { } function dispatchBeforeDetachedBlur(target: HTMLElement): void { - const targetInstance = getClosestInstanceFromNode(target); ((selectionInformation: any): SelectionInformation).activeElementDetached = target; - if (enableDeprecatedFlareAPI) { - DEPRECATED_dispatchEventForResponderEventSystem( - 'beforeblur', - targetInstance, - ({ - target, - timeStamp: Date.now(), - }: any), - target, - RESPONDER_EVENT_SYSTEM | IS_PASSIVE, - ); - } - if (enableUseEventAPI) { + if (enableDeprecatedFlareAPI || enableUseEventAPI) { const event = createEvent(TOP_BEFORE_BLUR); // Dispatch "beforeblur" directly on the target, // so it gets picked up by the event system and @@ -553,19 +537,7 @@ function dispatchBeforeDetachedBlur(target: HTMLElement): void { } function dispatchAfterDetachedBlur(target: HTMLElement): void { - if (enableDeprecatedFlareAPI) { - DEPRECATED_dispatchEventForResponderEventSystem( - 'afterblur', - null, - ({ - relatedTarget: target, - timeStamp: Date.now(), - }: any), - target, - RESPONDER_EVENT_SYSTEM | IS_PASSIVE, - ); - } - if (enableUseEventAPI) { + if (enableDeprecatedFlareAPI || enableUseEventAPI) { const event = createEvent(TOP_AFTER_BLUR); // So we know what was detached, make the relatedTarget the // detached target on the "afterblur" event. diff --git a/packages/react-interactions/events/src/dom/DeprecatedFocus.js b/packages/react-interactions/events/src/dom/DeprecatedFocus.js index df64791aeabe..bbc35dd1348d 100644 --- a/packages/react-interactions/events/src/dom/DeprecatedFocus.js +++ b/packages/react-interactions/events/src/dom/DeprecatedFocus.js @@ -381,14 +381,13 @@ function dispatchAfterBlurWithinEvents( state: FocusState, ) { const pointerType = state.pointerType; - const target = ((state.focusTarget: any): Element | Document) || event.target; const onAfterBlurWithin = (props.onAfterBlurWithin: any); const relatedTarget = state.detachedTarget; - if (isFunction(onAfterBlurWithin)) { + if (isFunction(onAfterBlurWithin) && relatedTarget !== null) { const syntheticEvent = createFocusEvent( context, 'afterblurwithin', - target, + relatedTarget, pointerType, relatedTarget, ); @@ -684,7 +683,10 @@ const focusWithinResponderImpl = { ): void { if (event.type === 'afterblur') { const detachedTarget = state.detachedTarget; - if (detachedTarget !== null && detachedTarget === event.target) { + if ( + detachedTarget !== null && + detachedTarget === event.nativeEvent.relatedTarget + ) { dispatchAfterBlurWithinEvents(context, event, props, state); state.detachedTarget = null; if (state.addedRootEvents) {