{"files":[{"path":"packages\/react-dom\/src\/client\/ReactDOMHostConfig.js","status":"M"},{"path":"packages\/react-interactions\/events\/src\/dom\/__tests__\/FocusWithin-test.internal.js","status":"M"}],"patch":"diff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex 0cf8db9da9..4baee93d58 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -58,6 +58,17 @@ import {\n } from '..\/events\/DeprecatedDOMEventResponderSystem';\n import {retryIfBlockedOn} from '..\/events\/ReactDOMEventReplaying';\n \n+import {\n+ enableSuspenseServerRenderer,\n+ enableDeprecatedFlareAPI,\n+ enableFundamentalAPI,\n+} from 'shared\/ReactFeatureFlags';\n+import {HostComponent} from 'shared\/ReactWorkTags';\n+import {\n+ RESPONDER_EVENT_SYSTEM,\n+ IS_PASSIVE,\n+} from 'legacy-events\/EventSystemFlags';\n+\n export type Type = string;\n export type Props = {\n autoFocus?: boolean,\n@@ -112,16 +123,6 @@ type SelectionInformation = {|\n selectionRange: mixed,\n |};\n \n-import {\n- enableSuspenseServerRenderer,\n- enableDeprecatedFlareAPI,\n- enableFundamentalAPI,\n-} from 'shared\/ReactFeatureFlags';\n-import {\n- RESPONDER_EVENT_SYSTEM,\n- IS_PASSIVE,\n-} from 'legacy-events\/EventSystemFlags';\n-\n let SUPPRESS_HYDRATION_WARNING;\n if (__DEV__) {\n SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';\n@@ -584,7 +585,28 @@ export function clearSuspenseBoundaryFromContainer(\n retryIfBlockedOn(container);\n }\n \n+function instanceContainsElem(instance: Instance, element: HTMLElement) {\n+ let fiber = getClosestInstanceFromNode(element);\n+ while (fiber !== null) {\n+ if (fiber.tag === HostComponent && fiber.stateNode === element) {\n+ return true;\n+ }\n+ fiber = fiber.return;\n+ }\n+ return false;\n+}\n+\n export function hideInstance(instance: Instance): void {\n+ \/\/ Ensure we trigger `onBeforeBlur` if the active focused elment\n+ \/\/ is ether the instance of a child or the instance. We need\n+ \/\/ to traverse the Fiber tree here rather than use node.contains()\n+ \/\/ as the child node might be inside a Portal.\n+ if (enableDeprecatedFlareAPI && selectionInformation) {\n+ const focusedElem = selectionInformation.focusedElem;\n+ if (focusedElem !== null && instanceContainsElem(instance, focusedElem)) {\n+ dispatchBeforeDetachedBlur(((focusedElem: any): HTMLElement));\n+ }\n+ }\n \/\/ TODO: Does this work for all element types? What about MathML? Should we\n \/\/ pass host context to this method?\n instance = ((instance: any): HTMLElement);\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 0c2b783b03..647527e4e4 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,6 +16,7 @@ let ReactFeatureFlags;\n let ReactDOM;\n let FocusWithinResponder;\n let useFocusWithin;\n+let Scheduler;\n \n const initializeModules = hasPointerEvents => {\n setPointerEvent(hasPointerEvents);\n@@ -27,6 +28,7 @@ const initializeModules = hasPointerEvents => {\n FocusWithinResponder = require('react-interactions\/events\/focus')\n .FocusWithinResponder;\n useFocusWithin = require('react-interactions\/events\/focus').useFocusWithin;\n+ Scheduler = require('scheduler');\n };\n \n const forcePointerEvents = true;\n@@ -336,6 +338,68 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {\n expect.objectContaining({isTargetAttached: false}),\n );\n });\n+\n+ it.experimental(\n+ 'is called after a focused suspended element is hidden',\n+ () => {\n+ const Suspense = React.Suspense;\n+ let suspend = false;\n+ let resolve;\n+ let promise = new Promise(resolvePromise => (resolve = resolvePromise));\n+\n+ function Child() {\n+ if (suspend) {\n+ throw promise;\n+ } else {\n+ return ;\n+ }\n+ }\n+\n+ const Component = ({show}) => {\n+ const listener = useFocusWithin({\n+ onBeforeBlurWithin,\n+ onBlurWithin,\n+ });\n+\n+ return (\n+

\n+ \n+ \n+ <\/Suspense>\n+ <\/div>\n+ );\n+ };\n+\n+ const container2 = document.createElement('div');\n+ document.body.appendChild(container2);\n+\n+ let root = ReactDOM.createRoot(container2);\n+ root.render();\n+ Scheduler.unstable_flushAll();\n+ jest.runAllTimers();\n+ expect(container2.innerHTML).toBe('

<\/div>');\n+\n+ const inner = innerRef.current;\n+ const target = createEventTarget(inner);\n+ target.keydown({key: 'Tab'});\n+ target.focus();\n+ expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);\n+ expect(onBlurWithin).toHaveBeenCalledTimes(0);\n+\n+ suspend = true;\n+ root.render();\n+ Scheduler.unstable_flushAll();\n+ jest.runAllTimers();\n+ expect(container2.innerHTML).toBe(\n+ '

Loading...<\/div>',\n+ );\n+ expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);\n+ expect(onBlurWithin).toHaveBeenCalledTimes(1);\n+ resolve();\n+\n+ document.body.removeChild(container2);\n+ },\n+ );\n });\n \n it('expect displayName to show up for event component', () => {\n","commit":{"revision":"1a6d8179b6dd427fdf7ee50d5ac45ae5a40979eb","shortRevision":"1a6d8179b6","authorName":"Dominic Gannaway","subject":"[react-interactions] Ensure onBeforeBlur fires for hideInstance (#18064)","authoredAt":"2020-02-18T18:50:38+00:00","authorEmail":"trueadm@users.noreply.github.com"},"body":"","parents":["48c4867d745bbf91ae73892545960c0979c2dbf7"]}

dillon1000/react

Files changed