Skip to content

Commit e1f251a

Browse files
trueadmtrueadm
authored
Revert "Revert focus event PRs (facebook#18655)"
This reverts commit 58c895e.
1 parent cfefc81 commit e1f251a

File tree

4 files changed

+56
-65
lines changed

4 files changed

+56
-65
lines changed

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1355,10 +1355,6 @@ 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-
}
13621358
if (!listenerMap.has(eventKey)) {
13631359
if (isPassive) {
13641360
const activeKey = targetEventType + '_active';

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

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

@@ -74,8 +73,6 @@ import {
7473
enableScopeAPI,
7574
} from 'shared/ReactFeatureFlags';
7675
import {
77-
RESPONDER_EVENT_SYSTEM,
78-
IS_PASSIVE,
7976
PLUGIN_EVENT_SYSTEM,
8077
USE_EVENT_SYSTEM,
8178
} from '../events/EventSystemFlags';
@@ -528,22 +525,9 @@ function createEvent(type: TopLevelType): Event {
528525
}
529526

530527
function dispatchBeforeDetachedBlur(target: HTMLElement): void {
531-
const targetInstance = getClosestInstanceFromNode(target);
532528
((selectionInformation: any): SelectionInformation).activeElementDetached = target;
533529

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) {
547531
const event = createEvent(TOP_BEFORE_BLUR);
548532
// Dispatch "beforeblur" directly on the target,
549533
// so it gets picked up by the event system and
@@ -553,20 +537,7 @@ function dispatchBeforeDetachedBlur(target: HTMLElement): void {
553537
}
554538

555539
function dispatchAfterDetachedBlur(target: HTMLElement): void {
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) {
540+
if (enableDeprecatedFlareAPI || enableUseEventAPI) {
570541
const event = createEvent(TOP_AFTER_BLUR);
571542
// So we know what was detached, make the relatedTarget the
572543
// detached target on the "afterblur" event.

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

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

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

7072
/**
7173
* Shared between Focus and FocusWithin
@@ -116,8 +118,7 @@ const focusVisibleEvents = hasPointerEvents
116118

117119
const targetEventTypes = ['focus', 'blur', 'beforeblur', ...focusVisibleEvents];
118120

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

122123
function addWindowEventListener(types, callback, options) {
123124
types.forEach(type => {
@@ -192,10 +193,10 @@ function createFocusEvent(
192193
type: FocusEventType | FocusWithinEventType,
193194
target: Element | Document,
194195
pointerType: PointerType,
195-
isTargetAttached: boolean,
196+
relatedTarget: null | Element | Document,
196197
): FocusEvent {
197198
return {
198-
isTargetAttached,
199+
relatedTarget,
199200
target,
200201
type,
201202
pointerType,
@@ -297,7 +298,7 @@ function dispatchFocusEvents(
297298
'focus',
298299
target,
299300
pointerType,
300-
true,
301+
null,
301302
);
302303
context.dispatchEvent(syntheticEvent, onFocus, DiscreteEvent);
303304
}
@@ -321,7 +322,7 @@ function dispatchBlurEvents(
321322
'blur',
322323
target,
323324
pointerType,
324-
true,
325+
null,
325326
);
326327
context.dispatchEvent(syntheticEvent, onBlur, DiscreteEvent);
327328
}
@@ -346,7 +347,7 @@ function dispatchFocusWithinEvents(
346347
'focuswithin',
347348
target,
348349
pointerType,
349-
true,
350+
null,
350351
);
351352
context.dispatchEvent(syntheticEvent, onFocusWithin, DiscreteEvent);
352353
}
@@ -361,19 +362,39 @@ function dispatchBlurWithinEvents(
361362
const pointerType = state.pointerType;
362363
const target = ((state.focusTarget: any): Element | Document) || event.target;
363364
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-
isTargetAttached,
371+
null,
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+
377398
function dispatchFocusChange(
378399
context: ReactDOMResponderContext,
379400
props: FocusProps,
@@ -616,7 +637,7 @@ const focusWithinResponderImpl = {
616637
'beforeblurwithin',
617638
event.target,
618639
state.pointerType,
619-
true,
640+
null,
620641
);
621642
state.detachedTarget = event.target;
622643
context.dispatchEvent(
@@ -660,10 +681,13 @@ const focusWithinResponderImpl = {
660681
props: FocusWithinProps,
661682
state: FocusState,
662683
): void {
663-
if (event.type === 'blur') {
684+
if (event.type === 'afterblur') {
664685
const detachedTarget = state.detachedTarget;
665-
if (detachedTarget !== null && detachedTarget === event.target) {
666-
dispatchBlurWithinEvents(context, event, props, state);
686+
if (
687+
detachedTarget !== null &&
688+
detachedTarget === event.nativeEvent.relatedTarget
689+
) {
690+
dispatchAfterBlurWithinEvents(context, event, props, state);
667691
state.detachedTarget = null;
668692
if (state.addedRootEvents) {
669693
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, onBlurWithin, ref, innerRef, innerRef2;
293+
let onBeforeBlurWithin, onAfterBlurWithin, ref, innerRef, innerRef2;
294294

295295
beforeEach(() => {
296296
onBeforeBlurWithin = jest.fn();
297-
onBlurWithin = jest.fn();
297+
onAfterBlurWithin = 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-
onBlurWithin,
308+
onAfterBlurWithin,
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(onBlurWithin).toHaveBeenCalledTimes(0);
325+
expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
326326
ReactDOM.render(<Component show={false} />, container);
327327
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
328-
expect(onBlurWithin).toHaveBeenCalledTimes(1);
329-
expect(onBlurWithin).toHaveBeenCalledWith(
330-
expect.objectContaining({isTargetAttached: false}),
328+
expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
329+
expect(onAfterBlurWithin).toHaveBeenCalledWith(
330+
expect.objectContaining({relatedTarget: inner}),
331331
);
332332
});
333333

@@ -336,7 +336,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
336336
const Component = ({show}) => {
337337
const listener = useFocusWithin({
338338
onBeforeBlurWithin,
339-
onBlurWithin,
339+
onAfterBlurWithin,
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(onBlurWithin).toHaveBeenCalledTimes(0);
360+
expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
361361
ReactDOM.render(<Component show={false} />, container);
362362
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
363-
expect(onBlurWithin).toHaveBeenCalledTimes(1);
364-
expect(onBlurWithin).toHaveBeenCalledWith(
365-
expect.objectContaining({isTargetAttached: false}),
363+
expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
364+
expect(onAfterBlurWithin).toHaveBeenCalledWith(
365+
expect.objectContaining({relatedTarget: inner}),
366366
);
367367
});
368368

@@ -418,7 +418,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
418418
const Component = ({show}) => {
419419
const listener = useFocusWithin({
420420
onBeforeBlurWithin,
421-
onBlurWithin,
421+
onAfterBlurWithin,
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(onBlurWithin).toHaveBeenCalledTimes(0);
447+
expect(onAfterBlurWithin).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(onBlurWithin).toHaveBeenCalledTimes(1);
457+
expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
458458
resolve();
459459

460460
document.body.removeChild(container2);

0 commit comments

Comments
 (0)