Support empty fragment positions

Author: jackpope

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

@@ -59,6 +59,7 @@ import {
 import {
   traverseFragmentInstance,
   getFragmentParentHostInstance,
+  getNextSiblingHostInstance,
 } from 'react-reconciler/src/ReactFiberTreeReflection';
 
 export {detachDeletedInstance};
@@ -2518,10 +2519,32 @@ FragmentInstance.prototype.compareDocumentPosition = function (
   traverseFragmentInstance(this._fragmentFiber, collectChildren, children);
 
   if (children.length === 0) {
-    return (
-      Node.DOCUMENT_POSITION_DISCONNECTED |
-      Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC
-    );
+    // If the fragment has no children, we can use the parent and
+    // siblings to determine a position.
+    if (parentHostInstance === otherNode) {
+      return Node.DOCUMENT_POSITION_CONTAINS;
+    }
+    const parentResult = parentHostInstance.compareDocumentPosition(otherNode);
+    if (parentResult & Node.DOCUMENT_POSITION_CONTAINED_BY) {
+      // otherNode is one of the fragment's siblings. Use the next
+      // sibling to determine if its preceding or following.
+      const nextSiblingInstance = getNextSiblingHostInstance(
+        this._fragmentFiber,
+      );
+      if (nextSiblingInstance === null) {
+        return Node.DOCUMENT_POSITION_PRECEDING;
+      }
+      if (
+        nextSiblingInstance === otherNode ||
+        nextSiblingInstance.compareDocumentPosition(otherNode) &
+          Node.DOCUMENT_POSITION_FOLLOWING
+      ) {
+        return Node.DOCUMENT_POSITION_FOLLOWING;
+      } else {
+        return Node.DOCUMENT_POSITION_PRECEDING;
+      }
+    }
+    return parentResult;
   }
 
   const firstElement = children[0];

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

@@ -1193,7 +1193,7 @@ describe('FragmentRefs', () => {
     });
 
     // @gate enableFragmentRefs
-    it('returns disconnected and implementation specific for any comparison with empty fragment instances', async () => {
+    it('handles empty fragment instances', async () => {
       const fragmentRef = React.createRef();
       const beforeRef = React.createRef();
       const afterRef = React.createRef();
@@ -1215,45 +1215,45 @@ describe('FragmentRefs', () => {
       expectPosition(
         fragmentRef.current.compareDocumentPosition(document.body),
         {
-          preceding: false,
+          preceding: true,
           following: false,
-          contains: false,
+          contains: true,
           containedBy: false,
-          disconnected: true,
-          implementationSpecific: true,
+          disconnected: false,
+          implementationSpecific: false,
         },
       );
       expectPosition(
         fragmentRef.current.compareDocumentPosition(beforeRef.current),
         {
-          preceding: false,
+          preceding: true,
           following: false,
           contains: false,
           containedBy: false,
-          disconnected: true,
-          implementationSpecific: true,
+          disconnected: false,
+          implementationSpecific: false,
         },
       );
       expectPosition(
         fragmentRef.current.compareDocumentPosition(afterRef.current),
         {
           preceding: false,
-          following: false,
+          following: true,
           contains: false,
           containedBy: false,
-          disconnected: true,
-          implementationSpecific: true,
+          disconnected: false,
+          implementationSpecific: false,
         },
       );
       expectPosition(
         fragmentRef.current.compareDocumentPosition(containerRef.current),
         {
           preceding: false,
           following: false,
-          contains: false,
+          contains: true,
           containedBy: false,
-          disconnected: true,
-          implementationSpecific: true,
+          disconnected: false,
+          implementationSpecific: false,
         },
       );
     });

packages/react-reconciler/src/ReactFiberTreeReflection.js

@@ -367,3 +367,12 @@ export function getFragmentParentHostInstance(fiber: Fiber): null | Instance {
 
   return null;
 }
+
+export function getNextSiblingHostInstance(fiber: Fiber): null | Instance {
+  let nextSibling = null;
+  traverseFragmentInstanceChildren(fiber.sibling, instance => {
+    nextSibling = instance;
+    return true;
+  });
+  return nextSibling;
+}