Skip to content

Commit 58c895e

Browse files
trueadmtrueadm
authored
Revert focus event PRs (facebook#18655)
* Revert "Further cleanup to before/after blur (facebook#18649)" This reverts commit e2ccbf0. * Revert "Unify Flare FocusWithin responder with useFocusWithin (facebook#18636)" This reverts commit f24a9e7.
1 parent e2ccbf0 commit 58c895e

File tree

4 files changed

+65
-56
lines changed

4 files changed

+65
-56
lines changed

‎packages/react-dom/src/client/ReactDOMComponent.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1355,6 +1355,10 @@ export function listenToEventResponderEventTypes(
13551355
const targetEventType = isPassive
13561356
? eventType
13571357
: 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+
}
13581362
if (!listenerMap.has(eventKey)) {
13591363
if (isPassive) {
13601364
const activeKey = targetEventType + '_active';

‎packages/react-dom/src/client/ReactDOMHostConfig.js

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
6262
import {
6363
mountEventResponder,
6464
unmountEventResponder,
65+
DEPRECATED_dispatchEventForResponderEventSystem,
6566
} from '../events/DeprecatedDOMEventResponderSystem';
6667
import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
6768

@@ -73,6 +74,8 @@ import {
7374
enableScopeAPI,
7475
} from 'shared/ReactFeatureFlags';
7576
import {
77+
RESPONDER_EVENT_SYSTEM,
78+
IS_PASSIVE,
7679
PLUGIN_EVENT_SYSTEM,
7780
USE_EVENT_SYSTEM,
7881
} from '../events/EventSystemFlags';
@@ -525,9 +528,22 @@ function createEvent(type: TopLevelType): Event {
525528
}
526529

527530
function dispatchBeforeDetachedBlur(target: HTMLElement): void {
531+
const targetInstance = getClosestInstanceFromNode(target);
528532
((selectionInformation: any): SelectionInformation).activeElementDetached = target;
529533

530-
if (enableDeprecatedFlareAPI || enableUseEventAPI) {
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) {
531547
const event = createEvent(TOP_BEFORE_BLUR);
532548
// Dispatch "beforeblur" directly on the target,
533549
// so it gets picked up by the event system and
@@ -537,7 +553,20 @@ function dispatchBeforeDetachedBlur(target: HTMLElement): void {
537553
}
538554

539555
function dispatchAfterDetachedBlur(target: HTMLElement): void {
540-
if (enableDeprecatedFlareAPI || enableUseEventAPI) {
556+
if (enableDeprecatedFlareAPI) {
557+
DEPRECATED_dispatchEventForResponderEventSystem(
558+
'blur',
559+
null,
560+
({
561+
isTargetAttached: false,
562+
target,
563+
timeStamp: Date.now(),
564+
}: any),
565+
target,
566+
RESPONDER_EVENT_SYSTEM | IS_PASSIVE,
567+
);
568+
}
569+
if (enableUseEventAPI) {
541570
const event = createEvent(TOP_AFTER_BLUR);
542571
// So we know what was detached, make the relatedTarget the
543572
// detached target on the "afterblur" event.

‎packages/react-interactions/events/src/dom/DeprecatedFocus.js

Lines changed: 15 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {DiscreteEvent} from 'shared/ReactTypes';
2222
*/
2323

2424
type FocusEvent = {|
25-
relatedTarget: null | Element | Document,
25+
isTargetAttached: boolean,
2626
target: Element | Document,
2727
type: FocusEventType | FocusWithinEventType,
2828
pointerType: PointerType,
@@ -53,7 +53,6 @@ type FocusEventType = 'focus' | 'blur' | 'focuschange' | 'focusvisiblechange';
5353
type FocusWithinProps = {
5454
disabled?: boolean,
5555
onFocusWithin?: (e: FocusEvent) => void,
56-
onAfterBlurWithin?: (e: FocusEvent) => void,
5756
onBeforeBlurWithin?: (e: FocusEvent) => void,
5857
onBlurWithin?: (e: FocusEvent) => void,
5958
onFocusWithinChange?: boolean => void,
@@ -66,8 +65,7 @@ type FocusWithinEventType =
6665
| 'focuswithinchange'
6766
| 'blurwithin'
6867
| 'focuswithin'
69-
| 'beforeblurwithin'
70-
| 'afterblurwithin';
68+
| 'beforeblurwithin';
7169

7270
/**
7371
* Shared between Focus and FocusWithin
@@ -118,7 +116,8 @@ const focusVisibleEvents = hasPointerEvents
118116

119117
const targetEventTypes = ['focus', 'blur', 'beforeblur', ...focusVisibleEvents];
120118

121-
const rootEventTypes = ['afterblur'];
119+
// Used only for the blur "detachedTarget" logic
120+
const rootEventTypes = ['blur'];
122121

123122
function addWindowEventListener(types, callback, options) {
124123
types.forEach(type => {
@@ -193,10 +192,10 @@ function createFocusEvent(
193192
type: FocusEventType | FocusWithinEventType,
194193
target: Element | Document,
195194
pointerType: PointerType,
196-
relatedTarget: null | Element | Document,
195+
isTargetAttached: boolean,
197196
): FocusEvent {
198197
return {
199-
relatedTarget,
198+
isTargetAttached,
200199
target,
201200
type,
202201
pointerType,
@@ -298,7 +297,7 @@ function dispatchFocusEvents(
298297
'focus',
299298
target,
300299
pointerType,
301-
null,
300+
true,
302301
);
303302
context.dispatchEvent(syntheticEvent, onFocus, DiscreteEvent);
304303
}
@@ -322,7 +321,7 @@ function dispatchBlurEvents(
322321
'blur',
323322
target,
324323
pointerType,
325-
null,
324+
true,
326325
);
327326
context.dispatchEvent(syntheticEvent, onBlur, DiscreteEvent);
328327
}
@@ -347,7 +346,7 @@ function dispatchFocusWithinEvents(
347346
'focuswithin',
348347
target,
349348
pointerType,
350-
null,
349+
true,
351350
);
352351
context.dispatchEvent(syntheticEvent, onFocusWithin, DiscreteEvent);
353352
}
@@ -362,39 +361,19 @@ function dispatchBlurWithinEvents(
362361
const pointerType = state.pointerType;
363362
const target = ((state.focusTarget: any): Element | Document) || event.target;
364363
const onBlurWithin = (props.onBlurWithin: any);
364+
const isTargetAttached = state.detachedTarget === null;
365365
if (isFunction(onBlurWithin)) {
366366
const syntheticEvent = createFocusEvent(
367367
context,
368368
'blurwithin',
369369
target,
370370
pointerType,
371-
null,
371+
isTargetAttached,
372372
);
373373
context.dispatchEvent(syntheticEvent, onBlurWithin, DiscreteEvent);
374374
}
375375
}
376376

377-
function dispatchAfterBlurWithinEvents(
378-
context: ReactDOMResponderContext,
379-
event: ReactDOMResponderEvent,
380-
props: FocusWithinProps,
381-
state: FocusState,
382-
) {
383-
const pointerType = state.pointerType;
384-
const onAfterBlurWithin = (props.onAfterBlurWithin: any);
385-
const relatedTarget = state.detachedTarget;
386-
if (isFunction(onAfterBlurWithin) && relatedTarget !== null) {
387-
const syntheticEvent = createFocusEvent(
388-
context,
389-
'afterblurwithin',
390-
relatedTarget,
391-
pointerType,
392-
relatedTarget,
393-
);
394-
context.dispatchEvent(syntheticEvent, onAfterBlurWithin, DiscreteEvent);
395-
}
396-
}
397-
398377
function dispatchFocusChange(
399378
context: ReactDOMResponderContext,
400379
props: FocusProps,
@@ -637,7 +616,7 @@ const focusWithinResponderImpl = {
637616
'beforeblurwithin',
638617
event.target,
639618
state.pointerType,
640-
null,
619+
true,
641620
);
642621
state.detachedTarget = event.target;
643622
context.dispatchEvent(
@@ -681,13 +660,10 @@ const focusWithinResponderImpl = {
681660
props: FocusWithinProps,
682661
state: FocusState,
683662
): void {
684-
if (event.type === 'afterblur') {
663+
if (event.type === 'blur') {
685664
const detachedTarget = state.detachedTarget;
686-
if (
687-
detachedTarget !== null &&
688-
detachedTarget === event.nativeEvent.relatedTarget
689-
) {
690-
dispatchAfterBlurWithinEvents(context, event, props, state);
665+
if (detachedTarget !== null && detachedTarget === event.target) {
666+
dispatchBlurWithinEvents(context, event, props, state);
691667
state.detachedTarget = null;
692668
if (state.addedRootEvents) {
693669
state.addedRootEvents = false;

‎packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -290,11 +290,11 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
290290
});
291291

292292
describe('onBeforeBlurWithin', () => {
293-
let onBeforeBlurWithin, onAfterBlurWithin, ref, innerRef, innerRef2;
293+
let onBeforeBlurWithin, onBlurWithin, ref, innerRef, innerRef2;
294294

295295
beforeEach(() => {
296296
onBeforeBlurWithin = jest.fn();
297-
onAfterBlurWithin = jest.fn();
297+
onBlurWithin = jest.fn();
298298
ref = React.createRef();
299299
innerRef = React.createRef();
300300
innerRef2 = React.createRef();
@@ -305,7 +305,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
305305
const Component = ({show}) => {
306306
const listener = useFocusWithin({
307307
onBeforeBlurWithin,
308-
onAfterBlurWithin,
308+
onBlurWithin,
309309
});
310310
return (
311311
<div ref={ref} DEPRECATED_flareListeners={listener}>
@@ -322,12 +322,12 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
322322
target.keydown({key: 'Tab'});
323323
target.focus();
324324
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
325-
expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
325+
expect(onBlurWithin).toHaveBeenCalledTimes(0);
326326
ReactDOM.render(<Component show={false} />, container);
327327
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
328-
expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
329-
expect(onAfterBlurWithin).toHaveBeenCalledWith(
330-
expect.objectContaining({relatedTarget: inner}),
328+
expect(onBlurWithin).toHaveBeenCalledTimes(1);
329+
expect(onBlurWithin).toHaveBeenCalledWith(
330+
expect.objectContaining({isTargetAttached: false}),
331331
);
332332
});
333333

@@ -336,7 +336,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
336336
const Component = ({show}) => {
337337
const listener = useFocusWithin({
338338
onBeforeBlurWithin,
339-
onAfterBlurWithin,
339+
onBlurWithin,
340340
});
341341
return (
342342
<div ref={ref} DEPRECATED_flareListeners={listener}>
@@ -357,12 +357,12 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
357357
target.keydown({key: 'Tab'});
358358
target.focus();
359359
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
360-
expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
360+
expect(onBlurWithin).toHaveBeenCalledTimes(0);
361361
ReactDOM.render(<Component show={false} />, container);
362362
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
363-
expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
364-
expect(onAfterBlurWithin).toHaveBeenCalledWith(
365-
expect.objectContaining({relatedTarget: inner}),
363+
expect(onBlurWithin).toHaveBeenCalledTimes(1);
364+
expect(onBlurWithin).toHaveBeenCalledWith(
365+
expect.objectContaining({isTargetAttached: false}),
366366
);
367367
});
368368

@@ -418,7 +418,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
418418
const Component = ({show}) => {
419419
const listener = useFocusWithin({
420420
onBeforeBlurWithin,
421-
onAfterBlurWithin,
421+
onBlurWithin,
422422
});
423423

424424
return (
@@ -444,7 +444,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
444444
target.keydown({key: 'Tab'});
445445
target.focus();
446446
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
447-
expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
447+
expect(onBlurWithin).toHaveBeenCalledTimes(0);
448448

449449
suspend = true;
450450
root.render(<Component />);
@@ -454,7 +454,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
454454
'<div><input style="display: none;">Loading...</div>',
455455
);
456456
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
457-
expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
457+
expect(onBlurWithin).toHaveBeenCalledTimes(1);
458458
resolve();
459459

460460
document.body.removeChild(container2);

0 commit comments

Comments
 (0)