Skip to content

Commit

Permalink
Revert "Unify Flare FocusWithin responder with useFocusWithin (facebo…
Browse files Browse the repository at this point in the history 
…ok#18636)"

This reverts commit f24a9e7.
  • Loading branch information
@trueadm
trueadm committed Apr 17, 2020
1 parent 67d543a commit fdeb82a
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 53 deletions.
5 changes: 3 additions & 2 deletions packages/react-dom/src/client/ReactDOMHostConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -555,10 +555,11 @@ function dispatchBeforeDetachedBlur(target: HTMLElement): void {
function dispatchAfterDetachedBlur(target: HTMLElement): void {
if (enableDeprecatedFlareAPI) {
DEPRECATED_dispatchEventForResponderEventSystem(
'afterblur',
'blur',
null,
({
relatedTarget: target,
isTargetAttached: false,
target,
timeStamp: Date.now(),
}: any),
target,
Expand Down
50 changes: 14 additions & 36 deletions packages/react-interactions/events/src/dom/DeprecatedFocus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {DiscreteEvent} from 'shared/ReactTypes';
*/

type FocusEvent = {|
relatedTarget: null | Element | Document,
isTargetAttached: boolean,
target: Element | Document,
type: FocusEventType | FocusWithinEventType,
pointerType: PointerType,
Expand Down Expand Up @@ -53,7 +53,6 @@ type FocusEventType = 'focus' | 'blur' | 'focuschange' | 'focusvisiblechange';
type FocusWithinProps = {
disabled?: boolean,
onFocusWithin?: (e: FocusEvent) => void,
onAfterBlurWithin?: (e: FocusEvent) => void,
onBeforeBlurWithin?: (e: FocusEvent) => void,
onBlurWithin?: (e: FocusEvent) => void,
onFocusWithinChange?: boolean => void,
Expand All @@ -66,8 +65,7 @@ type FocusWithinEventType =
| 'focuswithinchange'
| 'blurwithin'
| 'focuswithin'
| 'beforeblurwithin'
| 'afterblurwithin';
| 'beforeblurwithin';

/**
* Shared between Focus and FocusWithin
Expand Down Expand Up @@ -118,7 +116,8 @@ const focusVisibleEvents = hasPointerEvents

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

const rootEventTypes = ['afterblur'];
// Used only for the blur "detachedTarget" logic
const rootEventTypes = ['blur'];

function addWindowEventListener(types, callback, options) {
types.forEach(type => {
Expand Down Expand Up @@ -193,10 +192,10 @@ function createFocusEvent(
type: FocusEventType | FocusWithinEventType,
target: Element | Document,
pointerType: PointerType,
relatedTarget: null | Element | Document,
isTargetAttached: boolean,
): FocusEvent {
return {
relatedTarget,
isTargetAttached,
target,
type,
pointerType,
Expand Down Expand Up @@ -298,7 +297,7 @@ function dispatchFocusEvents(
'focus',
target,
pointerType,
null,
true,
);
context.dispatchEvent(syntheticEvent, onFocus, DiscreteEvent);
}
Expand All @@ -322,7 +321,7 @@ function dispatchBlurEvents(
'blur',
target,
pointerType,
null,
true,
);
context.dispatchEvent(syntheticEvent, onBlur, DiscreteEvent);
}
Expand All @@ -347,7 +346,7 @@ function dispatchFocusWithinEvents(
'focuswithin',
target,
pointerType,
null,
true,
);
context.dispatchEvent(syntheticEvent, onFocusWithin, DiscreteEvent);
}
Expand All @@ -362,40 +361,19 @@ function dispatchBlurWithinEvents(
const pointerType = state.pointerType;
const target = ((state.focusTarget: any): Element | Document) || event.target;
const onBlurWithin = (props.onBlurWithin: any);
const isTargetAttached = state.detachedTarget === null;
if (isFunction(onBlurWithin)) {
const syntheticEvent = createFocusEvent(
context,
'blurwithin',
target,
pointerType,
null,
isTargetAttached,
);
context.dispatchEvent(syntheticEvent, onBlurWithin, DiscreteEvent);
}
}

function dispatchAfterBlurWithinEvents(
context: ReactDOMResponderContext,
event: ReactDOMResponderEvent,
props: FocusWithinProps,
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)) {
const syntheticEvent = createFocusEvent(
context,
'afterblurwithin',
target,
pointerType,
relatedTarget,
);
context.dispatchEvent(syntheticEvent, onAfterBlurWithin, DiscreteEvent);
}
}

function dispatchFocusChange(
context: ReactDOMResponderContext,
props: FocusProps,
Expand Down Expand Up @@ -638,7 +616,7 @@ const focusWithinResponderImpl = {
'beforeblurwithin',
event.target,
state.pointerType,
null,
true,
);
state.detachedTarget = event.target;
context.dispatchEvent(
Expand Down Expand Up @@ -682,10 +660,10 @@ const focusWithinResponderImpl = {
props: FocusWithinProps,
state: FocusState,
): void {
if (event.type === 'afterblur') {
if (event.type === 'blur') {
const detachedTarget = state.detachedTarget;
if (detachedTarget !== null && detachedTarget === event.target) {
dispatchAfterBlurWithinEvents(context, event, props, state);
dispatchBlurWithinEvents(context, event, props, state);
state.detachedTarget = null;
if (state.addedRootEvents) {
state.addedRootEvents = false;
Expand Down
30 changes: 15 additions & 15 deletions packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,11 +290,11 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
});

describe('onBeforeBlurWithin', () => {
let onBeforeBlurWithin, onAfterBlurWithin, ref, innerRef, innerRef2;
let onBeforeBlurWithin, onBlurWithin, ref, innerRef, innerRef2;

beforeEach(() => {
onBeforeBlurWithin = jest.fn();
onAfterBlurWithin = jest.fn();
onBlurWithin = jest.fn();
ref = React.createRef();
innerRef = React.createRef();
innerRef2 = React.createRef();
Expand All @@ -305,7 +305,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
const Component = ({show}) => {
const listener = useFocusWithin({
onBeforeBlurWithin,
onAfterBlurWithin,
onBlurWithin,
});
return (
<div ref={ref} DEPRECATED_flareListeners={listener}>
Expand All @@ -322,12 +322,12 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
target.keydown({key: 'Tab'});
target.focus();
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
expect(onBlurWithin).toHaveBeenCalledTimes(0);
ReactDOM.render(<Component show={false} />, container);
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
expect(onAfterBlurWithin).toHaveBeenCalledWith(
expect.objectContaining({relatedTarget: inner}),
expect(onBlurWithin).toHaveBeenCalledTimes(1);
expect(onBlurWithin).toHaveBeenCalledWith(
expect.objectContaining({isTargetAttached: false}),
);
});

Expand All @@ -336,7 +336,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
const Component = ({show}) => {
const listener = useFocusWithin({
onBeforeBlurWithin,
onAfterBlurWithin,
onBlurWithin,
});
return (
<div ref={ref} DEPRECATED_flareListeners={listener}>
Expand All @@ -357,12 +357,12 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
target.keydown({key: 'Tab'});
target.focus();
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
expect(onBlurWithin).toHaveBeenCalledTimes(0);
ReactDOM.render(<Component show={false} />, container);
expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
expect(onAfterBlurWithin).toHaveBeenCalledWith(
expect.objectContaining({relatedTarget: inner}),
expect(onBlurWithin).toHaveBeenCalledTimes(1);
expect(onBlurWithin).toHaveBeenCalledWith(
expect.objectContaining({isTargetAttached: false}),
);
});

Expand Down Expand Up @@ -418,7 +418,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
const Component = ({show}) => {
const listener = useFocusWithin({
onBeforeBlurWithin,
onAfterBlurWithin,
onBlurWithin,
});

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

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

document.body.removeChild(container2);
Expand Down

0 comments on commit fdeb82a

Please sign in to comment.