UI: Scroll to top when opening new NS API doc page in popup mode (#2181)

src/Documentation/ui/DocumentationPopUp.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Modal } from "../../ui/React/Modal";
 import { defaultNsApiPage, Navigator, openDocExternally } from "../../ui/React/Documentation";
 import { MD } from "../../ui/MD/MD";
@@ -7,6 +7,8 @@ import { DocumentationPopUpEvents } from "../root";
 
 export function DocumentationPopUp({ hidden }: { hidden: boolean }) {
   const [path, setPath] = useState<FilePath | undefined>(undefined);
+  const modalWrapperRef = useRef<HTMLDivElement>(null);
+
   useEffect(
     () =>
       DocumentationPopUpEvents.subscribe((path?: string) => {
@@ -14,6 +16,14 @@ export function DocumentationPopUp({ hidden }: { hidden: boolean }) {
       }),
     [],
   );
+
+  useEffect(() => {
+    if (!modalWrapperRef || !modalWrapperRef.current) {
+      return;
+    }
+    modalWrapperRef.current.scrollTo({ top: 0, behavior: "instant" });
+  });
+
   const navigator = {
     navigate(href: string, openExternally: boolean) {
       /**
@@ -53,11 +63,12 @@ export function DocumentationPopUp({ hidden }: { hidden: boolean }) {
       onClose={() => {
         setPath(undefined);
       }}
+      wrapperRef={modalWrapperRef}
       wrapperStyles={{ minWidth: "90%", minHeight: "90%", scrollbarWidth: "thin" }}
       removeFocus={false}
     >
       <Navigator.Provider value={navigator}>
-        <MD pageFilePath={path} top={0} />
+        <MD pageFilePath={path} />
       </Navigator.Provider>
     </Modal>
   );

src/Documentation/ui/DocumentationRoot.tsx

@@ -84,6 +84,16 @@ export function DocumentationRoot({ docPage }: { docPage?: string }): React.Reac
     setDeepLink(undefined);
   }, [deepLink, history]);
 
+  useEffect(() => {
+    /**
+     * Using setTimeout is a workaround. window.scrollTo does not work when we switch from Documentation tab to another
+     * tab, then switch back.
+     */
+    setTimeout(() => {
+      window.scrollTo({ top: windowTopPositionOfPages.get(history.page) ?? 0, behavior: "instant" });
+    }, 0);
+  });
+
   return (
     <>
       <Box
@@ -107,10 +117,7 @@ export function DocumentationRoot({ docPage }: { docPage?: string }): React.Reac
       </Box>
       <Box paddingTop="50px">
         <Navigator.Provider value={navigator}>
-          <MD
-            pageFilePath={deepLink ? asFilePath(deepLink) : history.page}
-            top={windowTopPositionOfPages.get(history.page) ?? 0}
-          />
+          <MD pageFilePath={deepLink ? asFilePath(deepLink) : history.page} />
         </Navigator.Provider>
       </Box>
     </>

src/ui/MD/MD.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import ReactMarkdown from "react-markdown";
 import { TableHead } from "@mui/material";
 import remarkGfm from "remark-gfm";
@@ -12,16 +12,8 @@ import { FilePath } from "../../Paths/FilePath";
 import { getPage } from "../../Documentation/root";
 import { DocImages } from "../../Documentation/pages";
 
-export function MD(props: { pageFilePath: FilePath; top: number }): React.ReactElement {
-  const pageContent = getPage(props.pageFilePath);
-
-  useEffect(() => {
-    // This is a workaround. window.scrollTo does not work when we switch from Documentation tab to another tab, then
-    // switch back.
-    setTimeout(() => {
-      window.scrollTo({ top: props.top, behavior: "instant" });
-    }, 0);
-  });
+export function MD({ pageFilePath }: { pageFilePath: FilePath }): React.ReactElement {
+  const pageContent = getPage(pageFilePath);
 
   return (
     <ReactMarkdown

src/ui/React/Modal.tsx

@@ -43,6 +43,7 @@ interface ModalProps {
   onClose: () => void;
   children: React.ReactNode;
   sx?: SxProps<Theme>;
+  wrapperRef?: React.RefObject<HTMLDivElement>;
   wrapperStyles?: CSSProperties;
   removeFocus?: boolean;
   // If it's true, the player can dismiss the modal by pressing the Esc button or clicking on the backdrop.
@@ -54,6 +55,7 @@ export const Modal = ({
   onClose,
   children,
   sx,
+  wrapperRef,
   wrapperStyles,
   removeFocus = true,
   canBeDismissedEasily = true,
@@ -84,6 +86,7 @@ export const Modal = ({
     >
       <Fade in={open}>
         <div
+          ref={wrapperRef}
           className={classes.paper}
           style={wrapperStyles}
           //@ts-expect-error inert is not supported by react types yet, this is a workaround until then. https://github.com/facebook/react/pull/24730