Return disconnected when fragment instance is unmounted

Author: jackpope

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

@@ -2628,8 +2628,14 @@ FragmentInstance.prototype.compareDocumentPosition = function (
   this: FragmentInstanceType,
   otherNode: Instance,
 ): number {
+  const parentHostInstance = getFragmentParentHostInstance(this._fragmentFiber);
+  if (parentHostInstance === null) {
+    return Node.DOCUMENT_POSITION_DISCONNECTED;
+  }
+
   const children: Array<Instance> = [];
   traverseFragmentInstance(this._fragmentFiber, collectChildren, children);
+
   if (children.length === 0) {
     return (
       Node.DOCUMENT_POSITION_DISCONNECTED |

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

@@ -969,24 +969,16 @@ describe('FragmentRefs', () => {
 
   describe('compareDocumentPosition', () => {
     function expectPosition(position, spec) {
-      expect((position & Node.DOCUMENT_POSITION_PRECEDING) !== 0).toBe(
-        spec.preceding,
-      );
-      expect((position & Node.DOCUMENT_POSITION_FOLLOWING) !== 0).toBe(
-        spec.following,
-      );
-      expect((position & Node.DOCUMENT_POSITION_CONTAINS) !== 0).toBe(
-        spec.contains,
-      );
-      expect((position & Node.DOCUMENT_POSITION_CONTAINED_BY) !== 0).toBe(
-        spec.containedBy,
-      );
-      expect((position & Node.DOCUMENT_POSITION_DISCONNECTED) !== 0).toBe(
-        spec.disconnected,
-      );
-      expect(
-        (position & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC) !== 0,
-      ).toBe(spec.implementationSpecific);
+      const positionResult = {
+        following: (position & Node.DOCUMENT_POSITION_FOLLOWING) !== 0,
+        preceding: (position & Node.DOCUMENT_POSITION_PRECEDING) !== 0,
+        contains: (position & Node.DOCUMENT_POSITION_CONTAINS) !== 0,
+        containedBy: (position & Node.DOCUMENT_POSITION_CONTAINED_BY) !== 0,
+        disconnected: (position & Node.DOCUMENT_POSITION_DISCONNECTED) !== 0,
+        implementationSpecific:
+          (position & Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC) !== 0,
+      };
+      expect(positionResult).toEqual(spec);
     }
     // @gate enableFragmentRefs
     it('returns the relationship between the fragment instance and a given node', async () => {
@@ -1265,5 +1257,56 @@ describe('FragmentRefs', () => {
         },
       );
     });
+
+    // @gate enableFragmentRefs
+    it('returns disconnected for comparison with an unmounted fragment instance', async () => {
+      const fragmentRef = React.createRef();
+      const containerRef = React.createRef();
+      const root = ReactDOMClient.createRoot(container);
+
+      function Test({mount}) {
+        return (
+          <div ref={containerRef}>
+            {mount && (
+              <Fragment ref={fragmentRef}>
+                <div></div>
+              </Fragment>
+            )}
+          </div>
+        );
+      }
+
+      await act(() => root.render(<Test mount={true} />));
+
+      const fragmentHandle = fragmentRef.current;
+
+      expectPosition(
+        fragmentHandle.compareDocumentPosition(containerRef.current),
+        {
+          preceding: true,
+          following: false,
+          contains: true,
+          containedBy: false,
+          disconnected: false,
+          implementationSpecific: false,
+        },
+      );
+
+      await act(() => {
+        root.render(<Test mount={false} />);
+      });
+
+      expectPosition(
+        fragmentHandle.compareDocumentPosition(containerRef.current),
+        {
+          preceding: false,
+          following: false,
+          contains: false,
+          containedBy: false,
+          disconnected: true,
+          implementationSpecific: false,
+        },
+      );
+    });
   });
 });