Dont consider portals target children for layout related methods

Author: jackpope

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -2329,6 +2329,7 @@ FragmentInstance.prototype.addEventListener = function (
     listeners.push({type, listener, optionsOrUseCapture});
     traverseFragmentInstance(
       this._fragmentFiber,
+      false,
       addEventListenerToChild,
       type,
       listener,
@@ -2360,6 +2361,7 @@ FragmentInstance.prototype.removeEventListener = function (
   if (typeof listeners !== 'undefined' && listeners.length > 0) {
     traverseFragmentInstance(
       this._fragmentFiber,
+      false,
       removeEventListenerFromChild,
       type,
       listener,
@@ -2392,6 +2394,7 @@ FragmentInstance.prototype.focus = function (
 ): void {
   traverseFragmentInstance(
     this._fragmentFiber,
+    false,
     setFocusIfFocusable,
     focusOptions,
   );
@@ -2402,7 +2405,12 @@ FragmentInstance.prototype.focusLast = function (
   focusOptions?: FocusOptions,
 ): void {
   const children: Array<Instance> = [];
-  traverseFragmentInstance(this._fragmentFiber, collectChildren, children);
+  traverseFragmentInstance(
+    this._fragmentFiber,
+    false,
+    collectChildren,
+    children,
+  );
   for (let i = children.length - 1; i >= 0; i--) {
     const child = children[i];
     if (setFocusIfFocusable(child, focusOptions)) {
@@ -2423,6 +2431,7 @@ FragmentInstance.prototype.blur = function (this: FragmentInstanceType): void {
   //   does not contain document.activeElement
   traverseFragmentInstance(
     this._fragmentFiber,
+    false,
     blurActiveElementWithinFragment,
   );
 };
@@ -2445,7 +2454,7 @@ FragmentInstance.prototype.observeUsing = function (
     this._observers = new Set();
   }
   this._observers.add(observer);
-  traverseFragmentInstance(this._fragmentFiber, observeChild, observer);
+  traverseFragmentInstance(this._fragmentFiber, false, observeChild, observer);
 };
 function observeChild(
   child: Instance,
@@ -2468,7 +2477,12 @@ FragmentInstance.prototype.unobserveUsing = function (
     }
   } else {
     this._observers.delete(observer);
-    traverseFragmentInstance(this._fragmentFiber, unobserveChild, observer);
+    traverseFragmentInstance(
+      this._fragmentFiber,
+      false,
+      unobserveChild,
+      observer,
+    );
   }
 };
 function unobserveChild(
@@ -2483,7 +2497,12 @@ FragmentInstance.prototype.getClientRects = function (
   this: FragmentInstanceType,
 ): Array<DOMRect> {
   const rects: Array<DOMRect> = [];
-  traverseFragmentInstance(this._fragmentFiber, collectClientRects, rects);
+  traverseFragmentInstance(
+    this._fragmentFiber,
+    true,
+    collectClientRects,
+    rects,
+  );
   return rects;
 };
 function collectClientRects(child: Instance, rects: Array<DOMRect>): boolean {
@@ -2516,7 +2535,12 @@ FragmentInstance.prototype.compareDocumentPosition = function (
   }
 
   const children: Array<Instance> = [];
-  traverseFragmentInstance(this._fragmentFiber, collectChildren, children);
+  traverseFragmentInstance(
+    this._fragmentFiber,
+    true,
+    collectChildren,
+    children,
+  );
 
   if (children.length === 0) {
     // If the fragment has no children, we can use the parent and

packages/react-dom/src/__tests__/ReactDOMFragmentRefs-test.js

@@ -11,6 +11,8 @@
 
 let React;
 let ReactDOMClient;
+let ReactDOM;
+let createPortal;
 let act;
 let container;
 let Fragment;
@@ -31,6 +33,8 @@ describe('FragmentRefs', () => {
     Fragment = React.Fragment;
     Activity = React.unstable_Activity;
     ReactDOMClient = require('react-dom/client');
+    ReactDOM = require('react-dom');
+    createPortal = ReactDOM.createPortal;
     act = require('internal-test-utils').act;
     const IntersectionMocks = require('./utils/IntersectionMocks');
     mockIntersectionObserver = IntersectionMocks.mockIntersectionObserver;
@@ -611,6 +615,39 @@ describe('FragmentRefs', () => {
       expect(logs).toEqual([]);
     });
 
+    // @gate enableFragmentRefs
+    it('applies event listeners to portaled children', async () => {
+      const fragmentRef = React.createRef();
+      const childARef = React.createRef();
+      const childBRef = React.createRef();
+      const root = ReactDOMClient.createRoot(container);
+
+      function Test() {
+        return (
+          <Fragment ref={fragmentRef}>
+            <div id="child-a" ref={childARef} />
+            {createPortal(<div id="child-b" ref={childBRef} />, document.body)}
+          </Fragment>
+        );
+      }
+
+      await act(() => {
+        root.render(<Test />);
+      });
+
+      const logs = [];
+      fragmentRef.current.addEventListener('click', e => {
+        logs.push(e.target.id);
+      });
+
+      childARef.current.click();
+      expect(logs).toEqual(['child-a']);
+
+      logs.length = 0;
+      childBRef.current.click();
+      expect(logs).toEqual(['child-b']);
+    });
+
     describe('with activity', () => {
       // @gate enableFragmentRefs && enableActivity
       it('does not apply event listeners to hidden trees', async () => {
@@ -1269,7 +1306,7 @@ describe('FragmentRefs', () => {
           <div ref={containerRef}>
             {mount && (
               <Fragment ref={fragmentRef}>
-                <div></div>
+                <div />
               </Fragment>
             )}
           </div>
@@ -1308,5 +1345,51 @@ describe('FragmentRefs', () => {
         },
       );
     });
+
+    // @gate enableFragmentRefs
+    it('handles portaled elements', async () => {
+      const fragmentRef = React.createRef();
+      const portaledSiblingRef = React.createRef();
+      const portaledChildRef = React.createRef();
+
+      function Test() {
+        return (
+          <div>
+            {createPortal(<div ref={portaledSiblingRef} />, document.body)}
+            <Fragment ref={fragmentRef}>
+              {createPortal(<div ref={portaledChildRef} />, document.body)}
+              <div />
+            </Fragment>
+          </div>
+        );
+      }
+
+      const root = ReactDOMClient.createRoot(container);
+      await act(() => root.render(<Test />));
+
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(portaledSiblingRef.current),
+        {
+          preceding: false,
+          following: true,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      expectPosition(
+        fragmentRef.current.compareDocumentPosition(portaledChildRef.current),
+        {
+          preceding: false,
+          following: true,
+          contains: false,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+    });
   });
 });

packages/react-reconciler/src/ReactFiberTreeReflection.js

@@ -321,16 +321,25 @@ export function doesFiberContain(
 
 export function traverseFragmentInstance<A, B, C>(
   fragmentFiber: Fiber,
+  skipPortals: boolean,
   fn: (Instance, A, B, C) => boolean,
   a: A,
   b: B,
   c: C,
 ): void {
-  traverseFragmentInstanceChildren(fragmentFiber.child, fn, a, b, c);
+  traverseFragmentInstanceChildren(
+    fragmentFiber.child,
+    skipPortals,
+    fn,
+    a,
+    b,
+    c,
+  );
 }
 
 function traverseFragmentInstanceChildren<A, B, C>(
   child: Fiber | null,
+  skipPortals: boolean,
   fn: (Instance, A, B, C) => boolean,
   a: A,
   b: B,
@@ -346,8 +355,10 @@ function traverseFragmentInstanceChildren<A, B, C>(
       child.memoizedState !== null
     ) {
       // Skip hidden subtrees
+    } else if (skipPortals && child.tag === HostPortal) {
+      // Skip portals
     } else {
-      traverseFragmentInstanceChildren(child.child, fn, a, b, c);
+      traverseFragmentInstanceChildren(child.child, skipPortals, fn, a, b, c);
     }
     child = child.sibling;
   }
@@ -370,7 +381,7 @@ export function getFragmentParentHostInstance(fiber: Fiber): null | Instance {
 
 export function getNextSiblingHostInstance(fiber: Fiber): null | Instance {
   let nextSibling = null;
-  traverseFragmentInstanceChildren(fiber.sibling, instance => {
+  traverseFragmentInstanceChildren(fiber.sibling, true, instance => {
     nextSibling = instance;
     return true;
   });