{"patch":"diff --git a\/packages\/react-art\/src\/ReactARTHostConfig.js b\/packages\/react-art\/src\/ReactARTHostConfig.js\nindex 4a525677bd..dbd8624551 100644\n--- a\/packages\/react-art\/src\/ReactARTHostConfig.js\n+++ b\/packages\/react-art\/src\/ReactARTHostConfig.js\n@@ -465,3 +465,7 @@ export function unmountFundamentalComponent(fundamentalInstance) {\n export function getInstanceFromNode(node) {\n throw new Error('Not yet implemented.');\n }\n+\n+export function beforeRemoveInstance(instance) {\n+ \/\/ noop\n+}\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex 5cda5e1ec4..2d4d9ba109 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -104,6 +104,12 @@ export type ChildSet = void; \/\/ Unused\n export type TimeoutHandle = TimeoutID;\n export type NoTimeout = -1;\n \n+type SelectionInformation = {|\n+ blurredActiveElement: null | HTMLElement,\n+ focusedElem: null | HTMLElement,\n+ selectionRange: mixed,\n+|};\n+\n import {\n enableSuspenseServerRenderer,\n enableFlareAPI,\n@@ -127,7 +133,7 @@ const SUSPENSE_FALLBACK_START_DATA = '$!';\n const STYLE = 'style';\n \n let eventsEnabled: ?boolean = null;\n-let selectionInformation: ?mixed = null;\n+let selectionInformation: null | SelectionInformation = null;\n \n function shouldAutoFocusHostComponent(type: string, props: Props): boolean {\n switch (type) {\n@@ -205,6 +211,13 @@ export function prepareForCommit(containerInfo: Container): void {\n \n export function resetAfterCommit(containerInfo: Container): void {\n restoreSelection(selectionInformation);\n+ if (enableFlareAPI) {\n+ const blurredActiveElement = (selectionInformation: any)\n+ .blurredActiveElement;\n+ if (blurredActiveElement !== null) {\n+ dispatchActiveElementBlur(blurredActiveElement);\n+ }\n+ }\n selectionInformation = null;\n ReactBrowserEventEmitterSetEnabled(eventsEnabled);\n eventsEnabled = null;\n@@ -452,30 +465,50 @@ export function insertInContainerBefore(\n }\n }\n \n+function dispatchFlareDetachedBlurEvent(\n+ elementDetached: boolean,\n+ targetInstance: null | Object,\n+ target: Element | Document,\n+): void {\n+ \/\/ Simlulate the custom event to the React Flare responder system.\n+ dispatchEventForResponderEventSystem(\n+ 'blur',\n+ targetInstance,\n+ ({\n+ elementDetached,\n+ target,\n+ timeStamp: Date.now(),\n+ }: any),\n+ target,\n+ RESPONDER_EVENT_SYSTEM | IS_PASSIVE,\n+ );\n+}\n+\n+function dispatchBeforeActiveElementBlur(element: HTMLElement): void {\n+ const targtInstance = getClosestInstanceFromNode(element);\n+ ((selectionInformation: any): SelectionInformation).blurredActiveElement = element;\n+ dispatchFlareDetachedBlurEvent(false, targtInstance, element);\n+}\n+\n+function dispatchActiveElementBlur(\n+ node: Instance | TextInstance | SuspenseInstance,\n+): void {\n+ dispatchFlareDetachedBlurEvent(true, null, ((node: any): HTMLElement));\n+}\n+\n \/\/ This is a specific event for the React Flare\n \/\/ event system, so event responders can act\n \/\/ accordingly to a DOM node being unmounted that\n \/\/ previously had active document focus.\n-function dispatchDetachedVisibleNodeEvent(\n- child: Instance | TextInstance | SuspenseInstance,\n+export function beforeRemoveInstance(\n+ instance: Instance | TextInstance | SuspenseInstance,\n ): void {\n if (\n enableFlareAPI &&\n selectionInformation &&\n- child === selectionInformation.focusedElem\n+ instance === selectionInformation.focusedElem\n ) {\n- const targetFiber = getClosestInstanceFromNode(child);\n- \/\/ Simlulate a blur event to the React Flare responder system.\n- dispatchEventForResponderEventSystem(\n- 'detachedvisiblenode',\n- targetFiber,\n- ({\n- target: child,\n- timeStamp: Date.now(),\n- }: any),\n- ((child: any): Document | Element),\n- RESPONDER_EVENT_SYSTEM | IS_PASSIVE,\n- );\n+ dispatchBeforeActiveElementBlur(((instance: any): HTMLElement));\n }\n }\n \n@@ -483,7 +516,6 @@ export function removeChild(\n parentInstance: Instance,\n child: Instance | TextInstance | SuspenseInstance,\n ): void {\n- dispatchDetachedVisibleNodeEvent(child);\n parentInstance.removeChild(child);\n }\n \n@@ -494,7 +526,6 @@ export function removeChildFromContainer(\n if (container.nodeType === COMMENT_NODE) {\n (container.parentNode: any).removeChild(child);\n } else {\n- dispatchDetachedVisibleNodeEvent(child);\n container.removeChild(child);\n }\n }\ndiff --git a\/packages\/react-dom\/src\/client\/ReactInputSelection.js b\/packages\/react-dom\/src\/client\/ReactInputSelection.js\nindex f2d0987608..cf413367f7 100644\n--- a\/packages\/react-dom\/src\/client\/ReactInputSelection.js\n+++ b\/packages\/react-dom\/src\/client\/ReactInputSelection.js\n@@ -100,6 +100,8 @@ export function hasSelectionCapabilities(elem) {\n export function getSelectionInformation() {\n const focusedElem = getActiveElementDeep();\n return {\n+ \/\/ Used by Flare\n+ blurredActiveElement: null,\n focusedElem: focusedElem,\n selectionRange: hasSelectionCapabilities(focusedElem)\n ? getSelection(focusedElem)\ndiff --git a\/packages\/react-interactions\/events\/src\/dom\/Focus.js b\/packages\/react-interactions\/events\/src\/dom\/Focus.js\nindex 1c7d261fc4..9886011c66 100644\n--- a\/packages\/react-interactions\/events\/src\/dom\/Focus.js\n+++ b\/packages\/react-interactions\/events\/src\/dom\/Focus.js\n@@ -45,12 +45,7 @@ type FocusProps = {\n onFocusVisibleChange: boolean => void,\n };\n \n-type FocusEventType =\n- | 'focus'\n- | 'blur'\n- | 'focuschange'\n- | 'focusvisiblechange'\n- | 'detachedvisiblenode';\n+type FocusEventType = 'focus' | 'blur' | 'focuschange' | 'focusvisiblechange';\n \n type FocusWithinProps = {\n disabled?: boolean,\n@@ -58,7 +53,8 @@ type FocusWithinProps = {\n onBlurWithin?: (e: FocusEvent) => void,\n onFocusWithinChange?: boolean => void,\n onFocusWithinVisibleChange?: boolean => void,\n- onDetachedVisibleNode?: (e: FocusEvent) => void,\n+ onBeforeFocusedElementDetached?: (e: FocusEvent) => void,\n+ onFocusedElementDetached?: (e: FocusEvent) => void,\n };\n \n type FocusWithinEventType =\n@@ -66,7 +62,8 @@ type FocusWithinEventType =\n | 'focuswithinchange'\n | 'blurwithin'\n | 'focuswithin'\n- | 'detachedvisiblenode';\n+ | 'focusedelementdetached'\n+ | 'beforefocusedelementdetached';\n \n \/**\n * Shared between Focus and FocusWithin\n@@ -79,14 +76,22 @@ const isMac =\n ? \/^Mac\/.test(window.navigator.platform)\n : false;\n \n-const targetEventTypes = ['focus', 'blur', 'detachedvisiblenode'];\n+const targetEventTypes = ['focus', 'blur'];\n \n const hasPointerEvents =\n typeof window !== 'undefined' && window.PointerEvent != null;\n \n const rootEventTypes = hasPointerEvents\n- ? ['keydown', 'keyup', 'pointermove', 'pointerdown', 'pointerup']\n- : ['keydown', 'keyup', 'mousedown', 'touchmove', 'touchstart', 'touchend'];\n+ ? ['keydown', 'keyup', 'pointermove', 'pointerdown', 'pointerup', 'blur']\n+ : [\n+ 'keydown',\n+ 'keyup',\n+ 'mousedown',\n+ 'touchmove',\n+ 'touchstart',\n+ 'touchend',\n+ 'blur',\n+ ];\n \n function isFunction(obj): boolean {\n return typeof obj === 'function';\n@@ -504,6 +509,23 @@ const focusWithinResponderImpl = {\n break;\n }\n case 'blur': {\n+ if ((nativeEvent: any).elementDetached === false) {\n+ const onBeforeFocusedElementDetached = (props.onBeforeFocusedElementDetached: any);\n+ if (isFunction(onBeforeFocusedElementDetached)) {\n+ const syntheticEvent = createFocusEvent(\n+ context,\n+ 'beforefocusedelementdetached',\n+ event.target,\n+ state.pointerType,\n+ );\n+ context.dispatchEvent(\n+ syntheticEvent,\n+ onBeforeFocusedElementDetached,\n+ DiscreteEvent,\n+ );\n+ }\n+ return;\n+ }\n if (\n state.isFocused &&\n !context.isTargetWithinResponder(relatedTarget)\n@@ -514,22 +536,6 @@ const focusWithinResponderImpl = {\n }\n break;\n }\n- case 'detachedvisiblenode': {\n- const onDetachedVisibleNode = (props.onDetachedVisibleNode: any);\n- if (isFunction(onDetachedVisibleNode)) {\n- const syntheticEvent = createFocusEvent(\n- context,\n- 'detachedvisiblenode',\n- event.target,\n- state.pointerType,\n- );\n- context.dispatchEvent(\n- syntheticEvent,\n- onDetachedVisibleNode,\n- DiscreteEvent,\n- );\n- }\n- }\n }\n },\n onRootEvent(\n@@ -538,6 +544,23 @@ const focusWithinResponderImpl = {\n props: FocusWithinProps,\n state: FocusState,\n ): void {\n+ if ((event.nativeEvent: any).elementDetached === true) {\n+ const onFocusedElementDetached = (props.onFocusedElementDetached: any);\n+ if (isFunction(onFocusedElementDetached)) {\n+ const syntheticEvent = createFocusEvent(\n+ context,\n+ 'focusedelementdetached',\n+ event.target,\n+ state.pointerType,\n+ );\n+ context.dispatchEvent(\n+ syntheticEvent,\n+ onFocusedElementDetached,\n+ DiscreteEvent,\n+ );\n+ }\n+ return;\n+ }\n handleRootEvent(event, context, state, isFocusVisible => {\n if (state.isFocused && state.isFocusVisible !== isFocusVisible) {\n state.isFocusVisible = isFocusVisible;\ndiff --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\nindex d90a95b841..388bce20f2 100644\n--- a\/packages\/react-interactions\/events\/src\/dom\/__tests__\/FocusWithin-test.internal.js\n+++ b\/packages\/react-interactions\/events\/src\/dom\/__tests__\/FocusWithin-test.internal.js\n@@ -262,37 +262,77 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {\n });\n });\n \n- describe('onDetachedVisibleNode', () => {\n- let onDetachedVisibleNode, ref, innerRef, innerRef2;\n-\n- const Component = ({show}) => {\n- const listener = useFocusWithin({\n- onDetachedVisibleNode,\n- });\n- return (\n-

\n- {show && }\n-

\n- <\/div>\n- );\n- };\n+ describe('onBeforeFocusedElementDetached\/onFocusedElementDetached', () => {\n+ let onBeforeFocusedElementDetached,\n+ onFocusedElementDetached,\n+ ref,\n+ innerRef,\n+ innerRef2;\n \n beforeEach(() => {\n- onDetachedVisibleNode = jest.fn();\n+ onBeforeFocusedElementDetached = jest.fn();\n+ onFocusedElementDetached = jest.fn();\n ref = React.createRef();\n innerRef = React.createRef();\n innerRef2 = React.createRef();\n- ReactDOM.render(, container);\n });\n \n it('is called after a focused element is unmounted', () => {\n+ const Component = ({show}) => {\n+ const listener = useFocusWithin({\n+ onBeforeFocusedElementDetached,\n+ onFocusedElementDetached,\n+ });\n+ return (\n+

\n+ {show && }\n+

\n+ <\/div>\n+ );\n+ };\n+\n+ ReactDOM.render(, container);\n+\n+ const inner = innerRef.current;\n+ const target = createEventTarget(inner);\n+ target.keydown({key: 'Tab'});\n+ target.focus();\n+ expect(onBeforeFocusedElementDetached).toHaveBeenCalledTimes(0);\n+ expect(onFocusedElementDetached).toHaveBeenCalledTimes(0);\n+ ReactDOM.render(, container);\n+ expect(onBeforeFocusedElementDetached).toHaveBeenCalledTimes(1);\n+ expect(onFocusedElementDetached).toHaveBeenCalledTimes(1);\n+ });\n+\n+ it('is called after a nested focused element is unmounted', () => {\n+ const Component = ({show}) => {\n+ const listener = useFocusWithin({\n+ onBeforeFocusedElementDetached,\n+ onFocusedElementDetached,\n+ });\n+ return (\n+

\n+ {show && (\n+

\n+ \n+ <\/div>\n+ )}\n+

\n+ <\/div>\n+ );\n+ };\n+\n+ ReactDOM.render(, container);\n+\n const inner = innerRef.current;\n const target = createEventTarget(inner);\n target.keydown({key: 'Tab'});\n target.focus();\n- expect(onDetachedVisibleNode).toHaveBeenCalledTimes(0);\n+ expect(onBeforeFocusedElementDetached).toHaveBeenCalledTimes(0);\n+ expect(onFocusedElementDetached).toHaveBeenCalledTimes(0);\n ReactDOM.render(, container);\n- expect(onDetachedVisibleNode).toHaveBeenCalledTimes(1);\n+ expect(onBeforeFocusedElementDetached).toHaveBeenCalledTimes(1);\n+ expect(onFocusedElementDetached).toHaveBeenCalledTimes(1);\n });\n });\n \ndiff --git a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\nindex 4b71f19f55..0731867150 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabricHostConfig.js\n@@ -495,3 +495,7 @@ export function cloneFundamentalInstance(fundamentalInstance) {\n export function getInstanceFromNode(node) {\n throw new Error('Not yet implemented.');\n }\n+\n+export function beforeRemoveInstance(instance) {\n+ \/\/ noop\n+}\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\nindex 4714fb3dd1..8cf0f8d4b4 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeHostConfig.js\n@@ -534,3 +534,7 @@ export function unmountFundamentalComponent(fundamentalInstance) {\n export function getInstanceFromNode(node) {\n throw new Error('Not yet implemented.');\n }\n+\n+export function beforeRemoveInstance(instance) {\n+ \/\/ noop\n+}\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\nindex 02b525a123..88a42db93d 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.js\n@@ -105,6 +105,7 @@ import {\n updateFundamentalComponent,\n commitHydratedContainer,\n commitHydratedSuspenseInstance,\n+ beforeRemoveInstance,\n } from '.\/ReactFiberHostConfig';\n import {\n captureCommitPhaseError,\n@@ -808,6 +809,7 @@ function commitUnmount(\n dependencies.responders = null;\n }\n }\n+ beforeRemoveInstance(current.stateNode);\n }\n safelyDetachRef(current);\n return;\ndiff --git a\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js b\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\nindex bcc228bcd6..f5097eba0b 100644\n--- a\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\n+++ b\/packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js\n@@ -70,6 +70,7 @@ export const mountFundamentalComponent =\n export const shouldUpdateFundamentalComponent =\n $$$hostConfig.shouldUpdateFundamentalComponent;\n export const getInstanceFromNode = $$$hostConfig.getInstanceFromNode;\n+export const beforeRemoveInstance = $$$hostConfig.beforeRemoveInstance;\n \n \/\/ -------------------\n \/\/ Mutation\ndiff --git a\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js b\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\nindex ea56e7616a..52848ad3ab 100644\n--- a\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\n+++ b\/packages\/react-test-renderer\/src\/ReactTestHostConfig.js\n@@ -367,3 +367,7 @@ export function getInstanceFromNode(mockNode: Object) {\n }\n return null;\n }\n+\n+export function beforeRemoveInstance(instance) {\n+ \/\/ noop\n+}\n","commit":{"authoredAt":"2019-11-13T20:46:00+00:00","authorEmail":"trueadm@users.noreply.github.com","subject":"[react-interactions] Refine custom active element blur logic (#17354)","authorName":"Dominic Gannaway","revision":"a61886b16b5183d63b85dbd92e5808f82be93208","shortRevision":"a61886b16b"},"files":[{"status":"M","path":"packages\/react-art\/src\/ReactARTHostConfig.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMHostConfig.js"},{"status":"M","path":"packages\/react-dom\/src\/client\/ReactInputSelection.js"},{"status":"M","path":"packages\/react-interactions\/events\/src\/dom\/Focus.js"},{"status":"M","path":"packages\/react-interactions\/events\/src\/dom\/__tests__\/FocusWithin-test.internal.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactFabricHostConfig.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactNativeHostConfig.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.js"},{"status":"M","path":"packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js"},{"status":"M","path":"packages\/react-test-renderer\/src\/ReactTestHostConfig.js"}],"parents":["b53ea6ca05d2ccb9950b40b33f74dfee0421d872"],"body":""}

dillon1000/react

Files changed