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>
     </>