From 26a362a32b26c64a592cea00c71a45644602b21c Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 13 Nov 2019 11:02:12 +0000 Subject: [PATCH 1/2] [react-interactions] Refine custom active element blur logic remove debugger Add beforeRemoveInstance fix typi --- packages/react-art/src/ReactARTHostConfig.js | 4 + .../src/client/ReactDOMHostConfig.js | 70 ++++++++++++----- .../src/client/ReactInputSelection.js | 2 + .../events/src/dom/Focus.js | 57 +++++++++++--- .../__tests__/FocusWithin-test.internal.js | 76 ++++++++++++++----- .../src/ReactFabricHostConfig.js | 4 + .../src/ReactNativeHostConfig.js | 4 + .../src/ReactFiberCommitWork.js | 2 + .../src/forks/ReactFiberHostConfig.custom.js | 1 + .../src/ReactTestHostConfig.js | 4 + 10 files changed, 177 insertions(+), 47 deletions(-) diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js index 4a525677bd214..dbd86245516ab 100644 --- a/packages/react-art/src/ReactARTHostConfig.js +++ b/packages/react-art/src/ReactARTHostConfig.js @@ -465,3 +465,7 @@ export function unmountFundamentalComponent(fundamentalInstance) { export function getInstanceFromNode(node) { throw new Error('Not yet implemented.'); } + +export function beforeRemoveInstance(instance) { + // noop +} diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index 5cda5e1ec48ef..f3c83a7ffcb14 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom/src/client/ReactDOMHostConfig.js @@ -104,6 +104,12 @@ export type ChildSet = void; // Unused export type TimeoutHandle = TimeoutID; export type NoTimeout = -1; +type SelectionInformation = {| + blurredActiveElement: null | HTMLElement, + focusedElem: null | HTMLElement, + selectionRange: mixed, +|}; + import { enableSuspenseServerRenderer, enableFlareAPI, @@ -127,7 +133,7 @@ const SUSPENSE_FALLBACK_START_DATA = '$!'; const STYLE = 'style'; let eventsEnabled: ?boolean = null; -let selectionInformation: ?mixed = null; +let selectionInformation: null | SelectionInformation = null; function shouldAutoFocusHostComponent(type: string, props: Props): boolean { switch (type) { @@ -205,6 +211,13 @@ export function prepareForCommit(containerInfo: Container): void { export function resetAfterCommit(containerInfo: Container): void { restoreSelection(selectionInformation); + if (enableFlareAPI) { + const blurredActiveElement = (selectionInformation: any) + .blurredActiveElement; + if (blurredActiveElement !== null) { + dispatchActiveElementBlur(blurredActiveElement); + } + } selectionInformation = null; ReactBrowserEventEmitterSetEnabled(eventsEnabled); eventsEnabled = null; @@ -452,30 +465,53 @@ export function insertInContainerBefore( } } +function dispatchCustomFlareEvent( + type: string, + targetInstance: null | Object, + target: Element | Document, +): void { + // Simlulate the custom event to the React Flare responder system. + dispatchEventForResponderEventSystem( + type, + targetInstance, + ({ + target, + timeStamp: Date.now(), + }: any), + target, + RESPONDER_EVENT_SYSTEM | IS_PASSIVE, + ); +} + +function dispatchBeforeActiveElementBlur(element: HTMLElement): void { + const targtInstance = getClosestInstanceFromNode(element); + ((selectionInformation: any): SelectionInformation).blurredActiveElement = element; + dispatchCustomFlareEvent('beforeactiveelementblur', targtInstance, element); +} + +function dispatchActiveElementBlur( + node: Instance | TextInstance | SuspenseInstance, +): void { + dispatchCustomFlareEvent( + 'activeelementblur', + null, + ((node: any): HTMLElement), + ); +} + // This is a specific event for the React Flare // event system, so event responders can act // accordingly to a DOM node being unmounted that // previously had active document focus. -function dispatchDetachedVisibleNodeEvent( - child: Instance | TextInstance | SuspenseInstance, +export function beforeRemoveInstance( + instance: Instance | TextInstance | SuspenseInstance, ): void { if ( enableFlareAPI && selectionInformation && - child === selectionInformation.focusedElem + instance === selectionInformation.focusedElem ) { - const targetFiber = getClosestInstanceFromNode(child); - // Simlulate a blur event to the React Flare responder system. - dispatchEventForResponderEventSystem( - 'detachedvisiblenode', - targetFiber, - ({ - target: child, - timeStamp: Date.now(), - }: any), - ((child: any): Document | Element), - RESPONDER_EVENT_SYSTEM | IS_PASSIVE, - ); + dispatchBeforeActiveElementBlur(((instance: any): HTMLElement)); } } @@ -483,7 +519,6 @@ export function removeChild( parentInstance: Instance, child: Instance | TextInstance | SuspenseInstance, ): void { - dispatchDetachedVisibleNodeEvent(child); parentInstance.removeChild(child); } @@ -494,7 +529,6 @@ export function removeChildFromContainer( if (container.nodeType === COMMENT_NODE) { (container.parentNode: any).removeChild(child); } else { - dispatchDetachedVisibleNodeEvent(child); container.removeChild(child); } } diff --git a/packages/react-dom/src/client/ReactInputSelection.js b/packages/react-dom/src/client/ReactInputSelection.js index f2d0987608b3e..cf413367f7a67 100644 --- a/packages/react-dom/src/client/ReactInputSelection.js +++ b/packages/react-dom/src/client/ReactInputSelection.js @@ -100,6 +100,8 @@ export function hasSelectionCapabilities(elem) { export function getSelectionInformation() { const focusedElem = getActiveElementDeep(); return { + // Used by Flare + blurredActiveElement: null, focusedElem: focusedElem, selectionRange: hasSelectionCapabilities(focusedElem) ? getSelection(focusedElem) diff --git a/packages/react-interactions/events/src/dom/Focus.js b/packages/react-interactions/events/src/dom/Focus.js index 1c7d261fc4686..cc0da6e953029 100644 --- a/packages/react-interactions/events/src/dom/Focus.js +++ b/packages/react-interactions/events/src/dom/Focus.js @@ -50,7 +50,8 @@ type FocusEventType = | 'blur' | 'focuschange' | 'focusvisiblechange' - | 'detachedvisiblenode'; + | 'beforeactiveelementblur' + | 'activeelementblur'; type FocusWithinProps = { disabled?: boolean, @@ -58,7 +59,8 @@ type FocusWithinProps = { onBlurWithin?: (e: FocusEvent) => void, onFocusWithinChange?: boolean => void, onFocusWithinVisibleChange?: boolean => void, - onDetachedVisibleNode?: (e: FocusEvent) => void, + onBeforeActiveElementBlur?: (e: FocusEvent) => void, + onActiveElementBlur?: (e: FocusEvent) => void, }; type FocusWithinEventType = @@ -66,7 +68,8 @@ type FocusWithinEventType = | 'focuswithinchange' | 'blurwithin' | 'focuswithin' - | 'detachedvisiblenode'; + | 'beforeactiveelementblur' + | 'activeelementblur'; /** * Shared between Focus and FocusWithin @@ -79,14 +82,29 @@ const isMac = ? /^Mac/.test(window.navigator.platform) : false; -const targetEventTypes = ['focus', 'blur', 'detachedvisiblenode']; +const targetEventTypes = ['focus', 'blur', 'beforeactiveelementblur']; const hasPointerEvents = typeof window !== 'undefined' && window.PointerEvent != null; const rootEventTypes = hasPointerEvents - ? ['keydown', 'keyup', 'pointermove', 'pointerdown', 'pointerup'] - : ['keydown', 'keyup', 'mousedown', 'touchmove', 'touchstart', 'touchend']; + ? [ + 'keydown', + 'keyup', + 'pointermove', + 'pointerdown', + 'pointerup', + 'activeelementblur', + ] + : [ + 'keydown', + 'keyup', + 'mousedown', + 'touchmove', + 'touchstart', + 'touchend', + 'activeelementblur', + ]; function isFunction(obj): boolean { return typeof obj === 'function'; @@ -514,18 +532,18 @@ const focusWithinResponderImpl = { } break; } - case 'detachedvisiblenode': { - const onDetachedVisibleNode = (props.onDetachedVisibleNode: any); - if (isFunction(onDetachedVisibleNode)) { + case 'beforeactiveelementblur': { + const onBeforeActiveElementBlur = (props.onBeforeActiveElementBlur: any); + if (isFunction(onBeforeActiveElementBlur)) { const syntheticEvent = createFocusEvent( context, - 'detachedvisiblenode', + 'beforeactiveelementblur', event.target, state.pointerType, ); context.dispatchEvent( syntheticEvent, - onDetachedVisibleNode, + onBeforeActiveElementBlur, DiscreteEvent, ); } @@ -538,6 +556,23 @@ const focusWithinResponderImpl = { props: FocusWithinProps, state: FocusState, ): void { + if (event.type === 'activeelementblur') { + const onActiveElementBlur = (props.onActiveElementBlur: any); + if (isFunction(onActiveElementBlur)) { + const syntheticEvent = createFocusEvent( + context, + 'activeelementblur', + event.target, + state.pointerType, + ); + context.dispatchEvent( + syntheticEvent, + onActiveElementBlur, + DiscreteEvent, + ); + } + return; + } handleRootEvent(event, context, state, isFocusVisible => { if (state.isFocused && state.isFocusVisible !== isFocusVisible) { state.isFocusVisible = isFocusVisible; diff --git a/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js index d90a95b8413d8..70aac0f36bad4 100644 --- a/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js +++ b/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js @@ -262,37 +262,77 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => { }); }); - describe('onDetachedVisibleNode', () => { - let onDetachedVisibleNode, ref, innerRef, innerRef2; - - const Component = ({show}) => { - const listener = useFocusWithin({ - onDetachedVisibleNode, - }); - return ( -
- {show && } -
-
- ); - }; + describe('onBeforeActiveElementBlur/onActiveElementBlur', () => { + let onBeforeActiveElementBlur, + onActiveElementBlur, + ref, + innerRef, + innerRef2; beforeEach(() => { - onDetachedVisibleNode = jest.fn(); + onBeforeActiveElementBlur = jest.fn(); + onActiveElementBlur = jest.fn(); ref = React.createRef(); innerRef = React.createRef(); innerRef2 = React.createRef(); - ReactDOM.render(, container); }); it('is called after a focused element is unmounted', () => { + const Component = ({show}) => { + const listener = useFocusWithin({ + onBeforeActiveElementBlur, + onActiveElementBlur, + }); + return ( +
+ {show && } +
+
+ ); + }; + + ReactDOM.render(, container); + + const inner = innerRef.current; + const target = createEventTarget(inner); + target.keydown({key: 'Tab'}); + target.focus(); + expect(onBeforeActiveElementBlur).toHaveBeenCalledTimes(0); + expect(onActiveElementBlur).toHaveBeenCalledTimes(0); + ReactDOM.render(, container); + expect(onBeforeActiveElementBlur).toHaveBeenCalledTimes(1); + expect(onActiveElementBlur).toHaveBeenCalledTimes(1); + }); + + it('is called after a nested focused element is unmounted', () => { + const Component = ({show}) => { + const listener = useFocusWithin({ + onBeforeActiveElementBlur, + onActiveElementBlur, + }); + return ( +
+ {show && ( +
+ +
+ )} +
+
+ ); + }; + + ReactDOM.render(, container); + const inner = innerRef.current; const target = createEventTarget(inner); target.keydown({key: 'Tab'}); target.focus(); - expect(onDetachedVisibleNode).toHaveBeenCalledTimes(0); + expect(onBeforeActiveElementBlur).toHaveBeenCalledTimes(0); + expect(onActiveElementBlur).toHaveBeenCalledTimes(0); ReactDOM.render(, container); - expect(onDetachedVisibleNode).toHaveBeenCalledTimes(1); + expect(onBeforeActiveElementBlur).toHaveBeenCalledTimes(1); + expect(onActiveElementBlur).toHaveBeenCalledTimes(1); }); }); diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js index 4b71f19f5557c..0731867150beb 100644 --- a/packages/react-native-renderer/src/ReactFabricHostConfig.js +++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js @@ -495,3 +495,7 @@ export function cloneFundamentalInstance(fundamentalInstance) { export function getInstanceFromNode(node) { throw new Error('Not yet implemented.'); } + +export function beforeRemoveInstance(instance) { + // noop +} diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js index 4714fb3dd1b98..8cf0f8d4b4f66 100644 --- a/packages/react-native-renderer/src/ReactNativeHostConfig.js +++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js @@ -534,3 +534,7 @@ export function unmountFundamentalComponent(fundamentalInstance) { export function getInstanceFromNode(node) { throw new Error('Not yet implemented.'); } + +export function beforeRemoveInstance(instance) { + // noop +} diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index 02b525a12391f..88a42db93dcaa 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -105,6 +105,7 @@ import { updateFundamentalComponent, commitHydratedContainer, commitHydratedSuspenseInstance, + beforeRemoveInstance, } from './ReactFiberHostConfig'; import { captureCommitPhaseError, @@ -808,6 +809,7 @@ function commitUnmount( dependencies.responders = null; } } + beforeRemoveInstance(current.stateNode); } safelyDetachRef(current); return; diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js index bcc228bcd693c..f5097eba0b4b6 100644 --- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js +++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js @@ -70,6 +70,7 @@ export const mountFundamentalComponent = export const shouldUpdateFundamentalComponent = $$$hostConfig.shouldUpdateFundamentalComponent; export const getInstanceFromNode = $$$hostConfig.getInstanceFromNode; +export const beforeRemoveInstance = $$$hostConfig.beforeRemoveInstance; // ------------------- // Mutation diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js index ea56e7616aa1b..52848ad3aba2a 100644 --- a/packages/react-test-renderer/src/ReactTestHostConfig.js +++ b/packages/react-test-renderer/src/ReactTestHostConfig.js @@ -367,3 +367,7 @@ export function getInstanceFromNode(mockNode: Object) { } return null; } + +export function beforeRemoveInstance(instance) { + // noop +} From eb5ba1861562873b9f833b7471fde1dc1846f11d Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 13 Nov 2019 19:54:08 +0000 Subject: [PATCH 2/2] Address feedback Fix typo remove dead code prettier --- .../src/client/ReactDOMHostConfig.js | 15 ++-- .../events/src/dom/Focus.js | 72 ++++++++----------- .../__tests__/FocusWithin-test.internal.js | 34 ++++----- 3 files changed, 53 insertions(+), 68 deletions(-) diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index f3c83a7ffcb14..2d4d9ba109d3e 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom/src/client/ReactDOMHostConfig.js @@ -465,16 +465,17 @@ export function insertInContainerBefore( } } -function dispatchCustomFlareEvent( - type: string, +function dispatchFlareDetachedBlurEvent( + elementDetached: boolean, targetInstance: null | Object, target: Element | Document, ): void { // Simlulate the custom event to the React Flare responder system. dispatchEventForResponderEventSystem( - type, + 'blur', targetInstance, ({ + elementDetached, target, timeStamp: Date.now(), }: any), @@ -486,17 +487,13 @@ function dispatchCustomFlareEvent( function dispatchBeforeActiveElementBlur(element: HTMLElement): void { const targtInstance = getClosestInstanceFromNode(element); ((selectionInformation: any): SelectionInformation).blurredActiveElement = element; - dispatchCustomFlareEvent('beforeactiveelementblur', targtInstance, element); + dispatchFlareDetachedBlurEvent(false, targtInstance, element); } function dispatchActiveElementBlur( node: Instance | TextInstance | SuspenseInstance, ): void { - dispatchCustomFlareEvent( - 'activeelementblur', - null, - ((node: any): HTMLElement), - ); + dispatchFlareDetachedBlurEvent(true, null, ((node: any): HTMLElement)); } // This is a specific event for the React Flare diff --git a/packages/react-interactions/events/src/dom/Focus.js b/packages/react-interactions/events/src/dom/Focus.js index cc0da6e953029..9886011c66bf1 100644 --- a/packages/react-interactions/events/src/dom/Focus.js +++ b/packages/react-interactions/events/src/dom/Focus.js @@ -45,13 +45,7 @@ type FocusProps = { onFocusVisibleChange: boolean => void, }; -type FocusEventType = - | 'focus' - | 'blur' - | 'focuschange' - | 'focusvisiblechange' - | 'beforeactiveelementblur' - | 'activeelementblur'; +type FocusEventType = 'focus' | 'blur' | 'focuschange' | 'focusvisiblechange'; type FocusWithinProps = { disabled?: boolean, @@ -59,8 +53,8 @@ type FocusWithinProps = { onBlurWithin?: (e: FocusEvent) => void, onFocusWithinChange?: boolean => void, onFocusWithinVisibleChange?: boolean => void, - onBeforeActiveElementBlur?: (e: FocusEvent) => void, - onActiveElementBlur?: (e: FocusEvent) => void, + onBeforeFocusedElementDetached?: (e: FocusEvent) => void, + onFocusedElementDetached?: (e: FocusEvent) => void, }; type FocusWithinEventType = @@ -68,8 +62,8 @@ type FocusWithinEventType = | 'focuswithinchange' | 'blurwithin' | 'focuswithin' - | 'beforeactiveelementblur' - | 'activeelementblur'; + | 'focusedelementdetached' + | 'beforefocusedelementdetached'; /** * Shared between Focus and FocusWithin @@ -82,20 +76,13 @@ const isMac = ? /^Mac/.test(window.navigator.platform) : false; -const targetEventTypes = ['focus', 'blur', 'beforeactiveelementblur']; +const targetEventTypes = ['focus', 'blur']; const hasPointerEvents = typeof window !== 'undefined' && window.PointerEvent != null; const rootEventTypes = hasPointerEvents - ? [ - 'keydown', - 'keyup', - 'pointermove', - 'pointerdown', - 'pointerup', - 'activeelementblur', - ] + ? ['keydown', 'keyup', 'pointermove', 'pointerdown', 'pointerup', 'blur'] : [ 'keydown', 'keyup', @@ -103,7 +90,7 @@ const rootEventTypes = hasPointerEvents 'touchmove', 'touchstart', 'touchend', - 'activeelementblur', + 'blur', ]; function isFunction(obj): boolean { @@ -522,6 +509,23 @@ const focusWithinResponderImpl = { break; } case 'blur': { + if ((nativeEvent: any).elementDetached === false) { + const onBeforeFocusedElementDetached = (props.onBeforeFocusedElementDetached: any); + if (isFunction(onBeforeFocusedElementDetached)) { + const syntheticEvent = createFocusEvent( + context, + 'beforefocusedelementdetached', + event.target, + state.pointerType, + ); + context.dispatchEvent( + syntheticEvent, + onBeforeFocusedElementDetached, + DiscreteEvent, + ); + } + return; + } if ( state.isFocused && !context.isTargetWithinResponder(relatedTarget) @@ -532,22 +536,6 @@ const focusWithinResponderImpl = { } break; } - case 'beforeactiveelementblur': { - const onBeforeActiveElementBlur = (props.onBeforeActiveElementBlur: any); - if (isFunction(onBeforeActiveElementBlur)) { - const syntheticEvent = createFocusEvent( - context, - 'beforeactiveelementblur', - event.target, - state.pointerType, - ); - context.dispatchEvent( - syntheticEvent, - onBeforeActiveElementBlur, - DiscreteEvent, - ); - } - } } }, onRootEvent( @@ -556,18 +544,18 @@ const focusWithinResponderImpl = { props: FocusWithinProps, state: FocusState, ): void { - if (event.type === 'activeelementblur') { - const onActiveElementBlur = (props.onActiveElementBlur: any); - if (isFunction(onActiveElementBlur)) { + if ((event.nativeEvent: any).elementDetached === true) { + const onFocusedElementDetached = (props.onFocusedElementDetached: any); + if (isFunction(onFocusedElementDetached)) { const syntheticEvent = createFocusEvent( context, - 'activeelementblur', + 'focusedelementdetached', event.target, state.pointerType, ); context.dispatchEvent( syntheticEvent, - onActiveElementBlur, + onFocusedElementDetached, DiscreteEvent, ); } diff --git a/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js index 70aac0f36bad4..388bce20f2b27 100644 --- a/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js +++ b/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js @@ -262,16 +262,16 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => { }); }); - describe('onBeforeActiveElementBlur/onActiveElementBlur', () => { - let onBeforeActiveElementBlur, - onActiveElementBlur, + describe('onBeforeFocusedElementDetached/onFocusedElementDetached', () => { + let onBeforeFocusedElementDetached, + onFocusedElementDetached, ref, innerRef, innerRef2; beforeEach(() => { - onBeforeActiveElementBlur = jest.fn(); - onActiveElementBlur = jest.fn(); + onBeforeFocusedElementDetached = jest.fn(); + onFocusedElementDetached = jest.fn(); ref = React.createRef(); innerRef = React.createRef(); innerRef2 = React.createRef(); @@ -280,8 +280,8 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => { it('is called after a focused element is unmounted', () => { const Component = ({show}) => { const listener = useFocusWithin({ - onBeforeActiveElementBlur, - onActiveElementBlur, + onBeforeFocusedElementDetached, + onFocusedElementDetached, }); return (
@@ -297,18 +297,18 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => { const target = createEventTarget(inner); target.keydown({key: 'Tab'}); target.focus(); - expect(onBeforeActiveElementBlur).toHaveBeenCalledTimes(0); - expect(onActiveElementBlur).toHaveBeenCalledTimes(0); + expect(onBeforeFocusedElementDetached).toHaveBeenCalledTimes(0); + expect(onFocusedElementDetached).toHaveBeenCalledTimes(0); ReactDOM.render(, container); - expect(onBeforeActiveElementBlur).toHaveBeenCalledTimes(1); - expect(onActiveElementBlur).toHaveBeenCalledTimes(1); + expect(onBeforeFocusedElementDetached).toHaveBeenCalledTimes(1); + expect(onFocusedElementDetached).toHaveBeenCalledTimes(1); }); it('is called after a nested focused element is unmounted', () => { const Component = ({show}) => { const listener = useFocusWithin({ - onBeforeActiveElementBlur, - onActiveElementBlur, + onBeforeFocusedElementDetached, + onFocusedElementDetached, }); return (
@@ -328,11 +328,11 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => { const target = createEventTarget(inner); target.keydown({key: 'Tab'}); target.focus(); - expect(onBeforeActiveElementBlur).toHaveBeenCalledTimes(0); - expect(onActiveElementBlur).toHaveBeenCalledTimes(0); + expect(onBeforeFocusedElementDetached).toHaveBeenCalledTimes(0); + expect(onFocusedElementDetached).toHaveBeenCalledTimes(0); ReactDOM.render(, container); - expect(onBeforeActiveElementBlur).toHaveBeenCalledTimes(1); - expect(onActiveElementBlur).toHaveBeenCalledTimes(1); + expect(onBeforeFocusedElementDetached).toHaveBeenCalledTimes(1); + expect(onFocusedElementDetached).toHaveBeenCalledTimes(1); }); });