[pull] main from react:main

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

@@ -3614,12 +3614,34 @@ if (enableFragmentRefsScrollIntoView) {
       const target = getInstanceFromHostFiber<Instance | Container>(
         targetFiber,
       );
-      // TODO: If the parent host fiber is a HostRoot, the target is a
-      // Container which can be a Document or DocumentFragment. Those have no
-      // scrollIntoView method, so this crashes at runtime.
-      // $FlowFixMe[prop-missing]
-      target.scrollIntoView(alignToTop);
-      return;
+      // If the parent host fiber is a HostRoot, the target is a Container
+      // which is not necessarily an Element with a scrollIntoView method.
+      if (target.nodeType === DOCUMENT_NODE) {
+        // A Document is always in view.
+      } else if (target.nodeType === DOCUMENT_FRAGMENT_NODE) {
+        const fragment = target as any as DocumentFragment;
+        // ShadowRoot always has a host: https://dom.spec.whatwg.org/#ref-for-concept-documentfragment-host%E2%91%A5
+        // A generic DocumentFragment doesn't implement this property but conceptually
+        // host is a nullable Element: https://dom.spec.whatwg.org/#concept-documentfragment-host
+        const host =
+          'host' in fragment ? (fragment as any as ShadowRoot).host : null;
+        if (host !== null) {
+          // The ShadowRoot's host element marks the position where the
+          // fragment's content would appear.
+          host.scrollIntoView(alignToTop);
+        } else if (__DEV__) {
+          console.warn(
+            'You are attempting to scroll a FragmentInstance that is only ' +
+              'mounted inside a detached DocumentFragment. No scroll was ' +
+              'performed.',
+          );
+        }
+        return;
+      } else {
+        // Narrowed down to Element by nodeType check above, but Flow doesn't know that.
+        const element = target as any as Element;
+        element.scrollIntoView(alignToTop);
+      }
     }
 
     let i = resolvedAlignToTop ? children.length - 1 : 0;

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

@@ -22,6 +22,7 @@ let simulateIntersection;
 let setClientRects;
 let mockRangeClientRects;
 let assertConsoleErrorDev;
+let assertConsoleWarnDev;
 
 function Wrapper({children}) {
   return children;
@@ -44,6 +45,7 @@ describe('FragmentRefs', () => {
     mockRangeClientRects = IntersectionMocks.mockRangeClientRects;
     assertConsoleErrorDev =
       require('internal-test-utils').assertConsoleErrorDev;
+    assertConsoleWarnDev = require('internal-test-utils').assertConsoleWarnDev;
 
     container = document.createElement('div');
     document.body.innerHTML = '';
@@ -2588,6 +2590,45 @@ describe('FragmentRefs', () => {
         fragmentRef.current.scrollIntoView();
         expect(parentRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
       });
+
+      // @gate enableFragmentRefs && enableFragmentRefsScrollIntoView
+      it('scrolls the host element when the fallback target is a ShadowRoot container', async () => {
+        const fragmentRef = React.createRef();
+        const host = document.createElement('div');
+        container.appendChild(host);
+        const shadowRoot = host.attachShadow({mode: 'open'});
+        const root = ReactDOMClient.createRoot(shadowRoot);
+        await act(() => {
+          root.render(<Fragment ref={fragmentRef} />);
+        });
+
+        // The ShadowRoot's host element marks where the fragment's content
+        // would appear
+        host.scrollIntoView = jest.fn();
+        fragmentRef.current.scrollIntoView();
+        expect(host.scrollIntoView).toHaveBeenCalledTimes(1);
+      });
+
+      // @gate enableFragmentRefs && enableFragmentRefsScrollIntoView
+      it('warns without scrolling when the fallback target is a detached DocumentFragment container', async () => {
+        const fragmentRef = React.createRef();
+        const root = ReactDOMClient.createRoot(
+          document.createDocumentFragment(),
+        );
+        await act(() => {
+          root.render(<Fragment ref={fragmentRef} />);
+        });
+
+        expect(() => fragmentRef.current.scrollIntoView()).not.toThrow();
+        assertConsoleWarnDev(
+          [
+            'You are attempting to scroll a FragmentInstance that is only ' +
+              'mounted inside a detached DocumentFragment. No scroll was ' +
+              'performed.',
+          ],
+          {withoutStack: true},
+        );
+      });
     });
   });