{"commit":{"authorName":"Dominic Gannaway","authorEmail":"trueadm@users.noreply.github.com","authoredAt":"2020-04-20T19:32:22+01:00","subject":"Refine the heuristics around beforeblur\/afterblur (#18668)","revision":"a152827ef697c55f89926f9b6b7aa436f1c0504e","shortRevision":"a152827ef6"},"body":"* Refine the heuristics around beforeblur\/afterblur","parents":["707478e68a65734501b7f9189e89ff0fca1642d5"],"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\/__tests__\/FocusWithin-test.internal.js"},{"status":"M","path":"packages\/react-interactions\/events\/src\/dom\/use-event\/__tests__\/useFocusWithin-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-noop-renderer\/src\/createReactNoop.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberTreeReflection.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/__tests__\/ReactFiberHostContext-test.internal.js"},{"status":"M","path":"packages\/react-reconciler\/src\/forks\/ReactFiberHostConfig.custom.js"},{"status":"M","path":"packages\/react-test-renderer\/src\/ReactTestHostConfig.js"}],"patch":"diff --git a\/packages\/react-art\/src\/ReactARTHostConfig.js b\/packages\/react-art\/src\/ReactARTHostConfig.js\nindex e0e883c4b2..8c50b26ecc 100644\n--- a\/packages\/react-art\/src\/ReactARTHostConfig.js\n+++ b\/packages\/react-art\/src\/ReactARTHostConfig.js\n@@ -306,6 +306,7 @@ export function getPublicInstance(instance) {\n \n export function prepareForCommit() {\n \/\/ Noop\n+ return null;\n }\n \n export function prepareUpdate(domElement, type, oldProps, newProps) {\n@@ -507,3 +508,11 @@ export function unmountEventListener(listener: any) {\n export function validateEventListenerTarget(target: any, listener: any) {\n throw new Error('Not yet implemented.');\n }\n+\n+export function beforeActiveInstanceBlur() {\n+ \/\/ noop\n+}\n+\n+export function afterActiveInstanceBlur() {\n+ \/\/ noop\n+}\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex e2e9211234..70f23dba42 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -91,10 +91,6 @@ import {\n import {getListenerMapForElement} from '..\/events\/DOMEventListenerMap';\n import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '..\/events\/DOMTopLevelEventTypes';\n \n-\/\/ TODO: This is an exposed internal, we should move this around\n-\/\/ so this isn't the case.\n-import {isFiberInsideHiddenOrRemovedTree} from 'react-reconciler\/src\/ReactFiberTreeReflection';\n-\n export type ReactListenerEvent = ReactDOMListenerEvent;\n export type ReactListenerMap = ReactDOMListenerMap;\n export type ReactListener = ReactDOMListener;\n@@ -159,7 +155,6 @@ export opaque type OpaqueIDType =\n };\n \n type SelectionInformation = {|\n- activeElementDetached: null | HTMLElement,\n focusedElem: null | HTMLElement,\n selectionRange: mixed,\n |};\n@@ -247,32 +242,40 @@ export function getPublicInstance(instance: Instance): * {\n return instance;\n }\n \n-export function prepareForCommit(containerInfo: Container): void {\n+export function prepareForCommit(containerInfo: Container): Object | null {\n eventsEnabled = ReactBrowserEventEmitterIsEnabled();\n selectionInformation = getSelectionInformation();\n+ let activeInstance = null;\n if (enableDeprecatedFlareAPI || enableUseEventAPI) {\n const focusedElem = selectionInformation.focusedElem;\n if (focusedElem !== null) {\n- const instance = getClosestInstanceFromNode(focusedElem);\n- if (instance !== null && isFiberInsideHiddenOrRemovedTree(instance)) {\n- dispatchBeforeDetachedBlur(focusedElem);\n- }\n+ activeInstance = getClosestInstanceFromNode(focusedElem);\n }\n }\n ReactBrowserEventEmitterSetEnabled(false);\n+ return activeInstance;\n+}\n+\n+export function beforeActiveInstanceBlur(): void {\n+ if (enableDeprecatedFlareAPI || enableUseEventAPI) {\n+ ReactBrowserEventEmitterSetEnabled(true);\n+ dispatchBeforeDetachedBlur((selectionInformation: any).focusedElem);\n+ ReactBrowserEventEmitterSetEnabled(false);\n+ }\n+}\n+\n+export function afterActiveInstanceBlur(): void {\n+ if (enableDeprecatedFlareAPI || enableUseEventAPI) {\n+ ReactBrowserEventEmitterSetEnabled(true);\n+ dispatchAfterDetachedBlur((selectionInformation: any).focusedElem);\n+ ReactBrowserEventEmitterSetEnabled(false);\n+ }\n }\n \n export function resetAfterCommit(containerInfo: Container): void {\n restoreSelection(selectionInformation);\n ReactBrowserEventEmitterSetEnabled(eventsEnabled);\n eventsEnabled = null;\n- if (enableDeprecatedFlareAPI || enableUseEventAPI) {\n- const activeElementDetached = (selectionInformation: any)\n- .activeElementDetached;\n- if (activeElementDetached !== null) {\n- dispatchAfterDetachedBlur(activeElementDetached);\n- }\n- }\n selectionInformation = null;\n }\n \n@@ -525,8 +528,6 @@ function createEvent(type: TopLevelType): Event {\n }\n \n function dispatchBeforeDetachedBlur(target: HTMLElement): void {\n- ((selectionInformation: any): SelectionInformation).activeElementDetached = target;\n-\n if (enableDeprecatedFlareAPI || enableUseEventAPI) {\n const event = createEvent(TOP_BEFORE_BLUR);\n \/\/ Dispatch \"beforeblur\" directly on the target,\ndiff --git a\/packages\/react-dom\/src\/client\/ReactInputSelection.js b\/packages\/react-dom\/src\/client\/ReactInputSelection.js\nindex 7d05a3d733..1465872a0e 100644\n--- a\/packages\/react-dom\/src\/client\/ReactInputSelection.js\n+++ b\/packages\/react-dom\/src\/client\/ReactInputSelection.js\n@@ -100,8 +100,6 @@ export function hasSelectionCapabilities(elem) {\n export function getSelectionInformation() {\n const focusedElem = getActiveElementDeep();\n return {\n- \/\/ Used by Flare\n- activeElementDetached: null,\n focusedElem: focusedElem,\n selectionRange: hasSelectionCapabilities(focusedElem)\n ? getSelection(focusedElem)\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 be5052fdbd..aedf567f58 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@@ -16,7 +16,8 @@ let ReactFeatureFlags;\n let ReactDOM;\n let FocusWithinResponder;\n let useFocusWithin;\n-let Scheduler;\n+let ReactTestRenderer;\n+let act;\n \n const initializeModules = hasPointerEvents => {\n setPointerEvent(hasPointerEvents);\n@@ -26,7 +27,8 @@ const initializeModules = hasPointerEvents => {\n ReactFeatureFlags.enableScopeAPI = true;\n React = require('react');\n ReactDOM = require('react-dom');\n- Scheduler = require('scheduler');\n+ ReactTestRenderer = require('react-test-renderer');\n+ act = ReactTestRenderer.act;\n \n \/\/ TODO: This import throws outside of experimental mode. Figure out better\n \/\/ strategy for gated imports.\n@@ -43,17 +45,22 @@ const table = [[forcePointerEvents], [!forcePointerEvents]];\n \n describe.each(table)('FocusWithin responder', hasPointerEvents => {\n let container;\n+ let container2;\n \n beforeEach(() => {\n initializeModules();\n container = document.createElement('div');\n document.body.appendChild(container);\n+ container2 = document.createElement('div');\n+ document.body.appendChild(container2);\n });\n \n afterEach(() => {\n ReactDOM.render(null, container);\n document.body.removeChild(container);\n+ document.body.removeChild(container2);\n container = null;\n+ container2 = null;\n });\n \n describe('disabled', () => {\n@@ -366,6 +373,40 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {\n );\n });\n \n+ \/\/ @gate experimental\n+ it('is called after many elements are unmounted', () => {\n+ const buttonRef = React.createRef();\n+ const inputRef = React.createRef();\n+\n+ const Component = ({show}) => {\n+ const listener = useFocusWithin({\n+ onBeforeBlurWithin,\n+ onAfterBlurWithin,\n+ });\n+ return (\n+

\n+ {show &&

dillon1000/react

Files changed