Further cleanup to before/after blur (#18649)
Dominic Gannaway committed
Apr 17, 2020 at 11:52 UTC
e2ccbf0358fafc8eb4470a45f5bca1cb97a4bba2
3 files changed
+8
-38
packages/react-dom/src/client/ReactDOMComponent.js
-4
@@ -1355,10 +1355,6 @@ export function listenToEventResponderEventTypes(
1355
const targetEventType = isPassive
1356
? eventType
1357
: eventType.substring(0, eventType.length - 7);
1358
- // We don't listen to this as we actually emulate it in the host config
1359
- if (targetEventType === 'beforeblur') {
1360
- continue;
1361
- }
1358
if (!listenerMap.has(eventKey)) {
1359
if (isPassive) {
1360
const activeKey = targetEventType + '_active';
packages/react-dom/src/client/ReactDOMHostConfig.js
+2
-30
@@ -62,7 +62,6 @@ import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
62
import {
63
mountEventResponder,
64
unmountEventResponder,
65
- DEPRECATED_dispatchEventForResponderEventSystem,
65
} from '../events/DeprecatedDOMEventResponderSystem';
66
import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
67
@@ -74,8 +73,6 @@ import {
73
enableScopeAPI,
74
} from 'shared/ReactFeatureFlags';
75
import {
77
- RESPONDER_EVENT_SYSTEM,
78
- IS_PASSIVE,
76
PLUGIN_EVENT_SYSTEM,
77
USE_EVENT_SYSTEM,
78
} from '../events/EventSystemFlags';
@@ -528,22 +525,9 @@ function createEvent(type: TopLevelType): Event {
525
}
526
527
function dispatchBeforeDetachedBlur(target: HTMLElement): void {
531
- const targetInstance = getClosestInstanceFromNode(target);
528
((selectionInformation: any): SelectionInformation).activeElementDetached = target;
529
534
- if (enableDeprecatedFlareAPI) {
535
- DEPRECATED_dispatchEventForResponderEventSystem(
536
- 'beforeblur',
537
- targetInstance,
538
- ({
539
- target,
540
- timeStamp: Date.now(),
541
- }: any),
542
- target,
543
- RESPONDER_EVENT_SYSTEM | IS_PASSIVE,
544
- );
545
- }
546
- if (enableUseEventAPI) {
530
+ if (enableDeprecatedFlareAPI || enableUseEventAPI) {
531
const event = createEvent(TOP_BEFORE_BLUR);
532
// Dispatch "beforeblur" directly on the target,
533
// so it gets picked up by the event system and
@@ -553,19 +537,7 @@ function dispatchBeforeDetachedBlur(target: HTMLElement): void {
537
}
538
539
function dispatchAfterDetachedBlur(target: HTMLElement): void {
556
- if (enableDeprecatedFlareAPI) {
557
- DEPRECATED_dispatchEventForResponderEventSystem(
558
- 'afterblur',
559
- null,
560
- ({
561
- relatedTarget: target,
562
- timeStamp: Date.now(),
563
- }: any),
564
- target,
565
- RESPONDER_EVENT_SYSTEM | IS_PASSIVE,
566
- );
567
- }
568
- if (enableUseEventAPI) {
540
+ if (enableDeprecatedFlareAPI || enableUseEventAPI) {
541
const event = createEvent(TOP_AFTER_BLUR);
542
// So we know what was detached, make the relatedTarget the
543
// detached target on the "afterblur" event.
packages/react-interactions/events/src/dom/DeprecatedFocus.js
+6
-4
@@ -381,14 +381,13 @@ function dispatchAfterBlurWithinEvents(
381
state: FocusState,
382
) {
383
const pointerType = state.pointerType;
384
- const target = ((state.focusTarget: any): Element | Document) || event.target;
384
const onAfterBlurWithin = (props.onAfterBlurWithin: any);
385
const relatedTarget = state.detachedTarget;
387
- if (isFunction(onAfterBlurWithin)) {
386
+ if (isFunction(onAfterBlurWithin) && relatedTarget !== null) {
387
const syntheticEvent = createFocusEvent(
388
context,
389
'afterblurwithin',
391
- target,
390
+ relatedTarget,
391
pointerType,
392
relatedTarget,
393
);
@@ -684,7 +683,10 @@ const focusWithinResponderImpl = {
683
): void {
684
if (event.type === 'afterblur') {
685
const detachedTarget = state.detachedTarget;
687
- if (detachedTarget !== null && detachedTarget === event.target) {
686
+ if (
687
+ detachedTarget !== null &&
688
+ detachedTarget === event.nativeEvent.relatedTarget
689
+ ) {
690
dispatchAfterBlurWithinEvents(context, event, props, state);
691
state.detachedTarget = null;
692
if (state.addedRootEvents) {