Refine the heuristics around beforeblur/afterblur (facebook#18668)

* Refine the heuristics around beforeblur/afterblur

Author: trueadm

packages/react-art/src/ReactARTHostConfig.js

@@ -306,6 +306,7 @@ export function getPublicInstance(instance) {
 
 export function prepareForCommit() {
   // Noop
+  return null;
 }
 
 export function prepareUpdate(domElement, type, oldProps, newProps) {
@@ -507,3 +508,11 @@ export function unmountEventListener(listener: any) {
 export function validateEventListenerTarget(target: any, listener: any) {
   throw new Error('Not yet implemented.');
 }
+
+export function beforeActiveInstanceBlur() {
+  // noop
+}
+
+export function afterActiveInstanceBlur() {
+  // noop
+}

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -91,10 +91,6 @@ import {
 import {getListenerMapForElement} from '../events/DOMEventListenerMap';
 import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '../events/DOMTopLevelEventTypes';
 
-// TODO: This is an exposed internal, we should move this around
-// so this isn't the case.
-import {isFiberInsideHiddenOrRemovedTree} from 'react-reconciler/src/ReactFiberTreeReflection';
-
 export type ReactListenerEvent = ReactDOMListenerEvent;
 export type ReactListenerMap = ReactDOMListenerMap;
 export type ReactListener = ReactDOMListener;
@@ -159,7 +155,6 @@ export opaque type OpaqueIDType =
     };
 
 type SelectionInformation = {|
-  activeElementDetached: null | HTMLElement,
   focusedElem: null | HTMLElement,
   selectionRange: mixed,
 |};
@@ -247,32 +242,40 @@ export function getPublicInstance(instance: Instance): * {
   return instance;
 }
 
-export function prepareForCommit(containerInfo: Container): void {
+export function prepareForCommit(containerInfo: Container): Object | null {
   eventsEnabled = ReactBrowserEventEmitterIsEnabled();
   selectionInformation = getSelectionInformation();
+  let activeInstance = null;
   if (enableDeprecatedFlareAPI || enableUseEventAPI) {
     const focusedElem = selectionInformation.focusedElem;
     if (focusedElem !== null) {
-      const instance = getClosestInstanceFromNode(focusedElem);
-      if (instance !== null && isFiberInsideHiddenOrRemovedTree(instance)) {
-        dispatchBeforeDetachedBlur(focusedElem);
-      }
+      activeInstance = getClosestInstanceFromNode(focusedElem);
     }
   }
   ReactBrowserEventEmitterSetEnabled(false);
+  return activeInstance;
+}
+
+export function beforeActiveInstanceBlur(): void {
+  if (enableDeprecatedFlareAPI || enableUseEventAPI) {
+    ReactBrowserEventEmitterSetEnabled(true);
+    dispatchBeforeDetachedBlur((selectionInformation: any).focusedElem);
+    ReactBrowserEventEmitterSetEnabled(false);
+  }
+}
+
+export function afterActiveInstanceBlur(): void {
+  if (enableDeprecatedFlareAPI || enableUseEventAPI) {
+    ReactBrowserEventEmitterSetEnabled(true);
+    dispatchAfterDetachedBlur((selectionInformation: any).focusedElem);
+    ReactBrowserEventEmitterSetEnabled(false);
+  }
 }
 
 export function resetAfterCommit(containerInfo: Container): void {
   restoreSelection(selectionInformation);
   ReactBrowserEventEmitterSetEnabled(eventsEnabled);
   eventsEnabled = null;
-  if (enableDeprecatedFlareAPI || enableUseEventAPI) {
-    const activeElementDetached = (selectionInformation: any)
-      .activeElementDetached;
-    if (activeElementDetached !== null) {
-      dispatchAfterDetachedBlur(activeElementDetached);
-    }
-  }
   selectionInformation = null;
 }
 
@@ -525,8 +528,6 @@ function createEvent(type: TopLevelType): Event {
 }
 
 function dispatchBeforeDetachedBlur(target: HTMLElement): void {
-  ((selectionInformation: any): SelectionInformation).activeElementDetached = target;
-
   if (enableDeprecatedFlareAPI || enableUseEventAPI) {
     const event = createEvent(TOP_BEFORE_BLUR);
     // Dispatch "beforeblur" directly on the target,

packages/react-dom/src/client/ReactInputSelection.js

@@ -100,8 +100,6 @@ export function hasSelectionCapabilities(elem) {
 export function getSelectionInformation() {
   const focusedElem = getActiveElementDeep();
   return {
-    // Used by Flare
-    activeElementDetached: null,
     focusedElem: focusedElem,
     selectionRange: hasSelectionCapabilities(focusedElem)
       ? getSelection(focusedElem)

packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js

@@ -16,7 +16,8 @@ let ReactFeatureFlags;
 let ReactDOM;
 let FocusWithinResponder;
 let useFocusWithin;
-let Scheduler;
+let ReactTestRenderer;
+let act;
 
 const initializeModules = hasPointerEvents => {
   setPointerEvent(hasPointerEvents);
@@ -26,7 +27,8 @@ const initializeModules = hasPointerEvents => {
   ReactFeatureFlags.enableScopeAPI = true;
   React = require('react');
   ReactDOM = require('react-dom');
-  Scheduler = require('scheduler');
+  ReactTestRenderer = require('react-test-renderer');
+  act = ReactTestRenderer.act;
 
   // TODO: This import throws outside of experimental mode. Figure out better
   // strategy for gated imports.
@@ -43,17 +45,22 @@ const table = [[forcePointerEvents], [!forcePointerEvents]];
 
 describe.each(table)('FocusWithin responder', hasPointerEvents => {
   let container;
+  let container2;
 
   beforeEach(() => {
     initializeModules();
     container = document.createElement('div');
     document.body.appendChild(container);
+    container2 = document.createElement('div');
+    document.body.appendChild(container2);
   });
 
   afterEach(() => {
     ReactDOM.render(null, container);
     document.body.removeChild(container);
+    document.body.removeChild(container2);
     container = null;
+    container2 = null;
   });
 
   describe('disabled', () => {
@@ -366,6 +373,40 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
       );
     });
 
+    // @gate experimental
+    it('is called after many elements are unmounted', () => {
+      const buttonRef = React.createRef();
+      const inputRef = React.createRef();
+
+      const Component = ({show}) => {
+        const listener = useFocusWithin({
+          onBeforeBlurWithin,
+          onAfterBlurWithin,
+        });
+        return (
+          <div ref={ref} DEPRECATED_flareListeners={listener}>
+            {show && <button>Press me!</button>}
+            {show && <button>Press me!</button>}
+            {show && <input ref={inputRef} />}
+            {show && <button>Press me!</button>}
+            {!show && <button ref={buttonRef}>Press me!</button>}
+            {show && <button>Press me!</button>}
+            <button>Press me!</button>
+            <button>Press me!</button>
+          </div>
+        );
+      };
+
+      ReactDOM.render(<Component show={true} />, container);
+
+      inputRef.current.focus();
+      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
+      expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
+      ReactDOM.render(<Component show={false} />, container);
+      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
+      expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
+    });
+
     // @gate experimental
     it('is called after a nested focused element is unmounted (with scope query)', () => {
       const TestScope = React.unstable_createScope();
@@ -430,12 +471,10 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
         );
       };
 
-      const container2 = document.createElement('div');
-      document.body.appendChild(container2);
-
       const root = ReactDOM.createRoot(container2);
-      root.render(<Component />);
-      Scheduler.unstable_flushAll();
+      act(() => {
+        root.render(<Component />);
+      });
       jest.runAllTimers();
       expect(container2.innerHTML).toBe('<div><input></div>');
 
@@ -447,17 +486,84 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
 
       suspend = true;
-      root.render(<Component />);
-      Scheduler.unstable_flushAll();
+      act(() => {
+        root.render(<Component />);
+      });
       jest.runAllTimers();
       expect(container2.innerHTML).toBe(
         '<div><input style="display: none;">Loading...</div>',
       );
       expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
       resolve();
+    });
+
+    // @gate experimental
+    it('is called after a focused suspended element is hidden then shown', () => {
+      const Suspense = React.Suspense;
+      let suspend = false;
+      let resolve;
+      const promise = new Promise(resolvePromise => (resolve = resolvePromise));
+      const buttonRef = React.createRef();
+
+      function Child() {
+        if (suspend) {
+          throw promise;
+        } else {
+          return <input ref={innerRef} />;
+        }
+      }
 
-      document.body.removeChild(container2);
+      const Component = ({show}) => {
+        const listener = useFocusWithin({
+          onBeforeBlurWithin,
+          onAfterBlurWithin,
+        });
+
+        return (
+          <div ref={ref} DEPRECATED_flareListeners={listener}>
+            <Suspense fallback={<button ref={buttonRef}>Loading...</button>}>
+              <Child />
+            </Suspense>
+          </div>
+        );
+      };
+
+      const root = ReactDOM.createRoot(container2);
+
+      act(() => {
+        root.render(<Component />);
+      });
+      jest.runAllTimers();
+
+      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
+      expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
+
+      suspend = true;
+      act(() => {
+        root.render(<Component />);
+      });
+      jest.runAllTimers();
+      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
+      expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
+
+      act(() => {
+        root.render(<Component />);
+      });
+      jest.runAllTimers();
+      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
+      expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);
+
+      buttonRef.current.focus();
+      suspend = false;
+      act(() => {
+        root.render(<Component />);
+      });
+      jest.runAllTimers();
+      expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
+      expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
+
+      resolve();
     });
   });