[react-interactions] Change unmount blur logic to a dedicated event (#17291)

Author: trueadm

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

@@ -452,7 +452,11 @@ export function insertInContainerBefore(
   }
 }
 
-function handleSimulateChildBlur(
+// 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,
 ): void {
   if (
@@ -463,13 +467,11 @@ function handleSimulateChildBlur(
     const targetFiber = getClosestInstanceFromNode(child);
     // Simlulate a blur event to the React Flare responder system.
     dispatchEventForResponderEventSystem(
-      'blur',
+      'detachedvisiblenode',
       targetFiber,
       ({
-        relatedTarget: null,
         target: child,
         timeStamp: Date.now(),
-        type: 'blur',
       }: any),
       ((child: any): Document | Element),
       RESPONDER_EVENT_SYSTEM | IS_PASSIVE,
@@ -481,7 +483,7 @@ export function removeChild(
   parentInstance: Instance,
   child: Instance | TextInstance | SuspenseInstance,
 ): void {
-  handleSimulateChildBlur(child);
+  dispatchDetachedVisibleNodeEvent(child);
   parentInstance.removeChild(child);
 }
 
@@ -492,7 +494,7 @@ export function removeChildFromContainer(
   if (container.nodeType === COMMENT_NODE) {
     (container.parentNode: any).removeChild(child);
   } else {
-    handleSimulateChildBlur(child);
+    dispatchDetachedVisibleNodeEvent(child);
     container.removeChild(child);
   }
 }

packages/react-interactions/events/src/dom/Focus.js

@@ -45,21 +45,28 @@ type FocusProps = {
   onFocusVisibleChange: boolean => void,
 };
 
-type FocusEventType = 'focus' | 'blur' | 'focuschange' | 'focusvisiblechange';
+type FocusEventType =
+  | 'focus'
+  | 'blur'
+  | 'focuschange'
+  | 'focusvisiblechange'
+  | 'detachedvisiblenode';
 
 type FocusWithinProps = {
   disabled?: boolean,
   onFocusWithin?: (e: FocusEvent) => void,
   onBlurWithin?: (e: FocusEvent) => void,
   onFocusWithinChange?: boolean => void,
   onFocusWithinVisibleChange?: boolean => void,
+  onDetachedVisibleNode?: (e: FocusEvent) => void,
 };
 
 type FocusWithinEventType =
   | 'focuswithinvisiblechange'
   | 'focuswithinchange'
   | 'blurwithin'
-  | 'focuswithin';
+  | 'focuswithin'
+  | 'detachedvisiblenode';
 
 /**
  * Shared between Focus and FocusWithin
@@ -72,7 +79,7 @@ const isMac =
     ? /^Mac/.test(window.navigator.platform)
     : false;
 
-const targetEventTypes = ['focus', 'blur'];
+const targetEventTypes = ['focus', 'blur', 'detachedvisiblenode'];
 
 const hasPointerEvents =
   typeof window !== 'undefined' && window.PointerEvent != null;
@@ -507,6 +514,22 @@ const focusWithinResponderImpl = {
         }
         break;
       }
+      case 'detachedvisiblenode': {
+        const onDetachedVisibleNode = (props.onDetachedVisibleNode: any);
+        if (isFunction(onDetachedVisibleNode)) {
+          const syntheticEvent = createFocusEvent(
+            context,
+            'detachedvisiblenode',
+            event.target,
+            state.pointerType,
+          );
+          context.dispatchEvent(
+            syntheticEvent,
+            onDetachedVisibleNode,
+            DiscreteEvent,
+          );
+        }
+      }
     }
   },
   onRootEvent(

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

@@ -141,16 +141,6 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
       expect(onFocusWithinChange).toHaveBeenCalledTimes(2);
       expect(onFocusWithinChange).toHaveBeenCalledWith(false);
     });
-
-    it('is called after a focused element is unmounted', () => {
-      const target = createEventTarget(innerRef.current);
-      target.focus();
-      expect(onFocusWithinChange).toHaveBeenCalledTimes(1);
-      expect(onFocusWithinChange).toHaveBeenCalledWith(true);
-      ReactDOM.render(<Component show={false} />, container);
-      expect(onFocusWithinChange).toHaveBeenCalledTimes(2);
-      expect(onFocusWithinChange).toHaveBeenCalledWith(false);
-    });
   });
 
   describe('onFocusWithinVisibleChange', () => {
@@ -270,17 +260,39 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
       expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
       expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
     });
+  });
+
+  describe('onDetachedVisibleNode', () => {
+    let onDetachedVisibleNode, ref, innerRef, innerRef2;
+
+    const Component = ({show}) => {
+      const listener = useFocusWithin({
+        onDetachedVisibleNode,
+      });
+      return (
+        <div ref={ref} listeners={listener}>
+          {show && <input ref={innerRef} />}
+          <div ref={innerRef2} />
+        </div>
+      );
+    };
+
+    beforeEach(() => {
+      onDetachedVisibleNode = jest.fn();
+      ref = React.createRef();
+      innerRef = React.createRef();
+      innerRef2 = React.createRef();
+      ReactDOM.render(<Component show={true} />, container);
+    });
 
     it('is called after a focused element is unmounted', () => {
       const inner = innerRef.current;
       const target = createEventTarget(inner);
       target.keydown({key: 'Tab'});
       target.focus();
-      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
-      expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
+      expect(onDetachedVisibleNode).toHaveBeenCalledTimes(0);
       ReactDOM.render(<Component show={false} />, container);
-      expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
-      expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
+      expect(onDetachedVisibleNode).toHaveBeenCalledTimes(1);
     });
   });