Further cleanup to before/after blur (#18649)

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';

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.

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) {