Disable menu/scroll tracking in ApiSchema (#158)

Author: rohit-gohri

.changeset/orange-peaches-applaud.md

@@ -0,0 +1,5 @@
+---
+'docusaurus-theme-redoc': patch
+---
+
+Disable anchor tracking on scroll in ApiSchema component

packages/docusaurus-theme-redoc/src/theme/ApiSchema/ApiSchema.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import clsx from 'clsx';
 import { ThemeProvider } from 'styled-components';
 import '../../global';
@@ -16,7 +16,15 @@ const ApiSchema: React.FC<Props> = ({
   ...rest
 }: Props): JSX.Element => {
   const specProps = useSpecData(id);
-  const { store } = useSpec(specProps);
+  const { store, darkStore, lightStore } = useSpec(specProps);
+
+  useEffect(() => {
+    /**
+     * @see https://github.com/Redocly/redoc/blob/823be24b313c3a2445df7e0801a0cc79c20bacd1/src/services/MenuStore.ts#L273-L276
+     */
+    lightStore.menu.dispose();
+    darkStore.menu.dispose();
+  }, [lightStore, darkStore]);
 
   return (
     <ThemeProvider theme={store.options.theme}>

packages/docusaurus-theme-redoc/src/utils/useSpec.ts

@@ -20,7 +20,7 @@ export function useSpec({ spec, url }: SpecProps) {
   const { isDarkTheme } = useColorMode();
   const themeOptions = usePluginData<GlobalData>('docusaurus-theme-redoc');
 
-  const result = useMemo(() => {
+  const stores = useMemo(() => {
     const { lightTheme, darkTheme, options: redocOptions } = themeOptions;
 
     const commonOptions: Partial<RedocRawOptions> = {
@@ -42,13 +42,19 @@ export function useSpec({ spec, url }: SpecProps) {
     });
 
     return {
-      // @ts-expect-error extra prop
-      hasLogo: !!spec.info?.['x-logo'],
       lightStore,
       darkStore,
-      store: isBrowser && isDarkTheme ? darkStore : lightStore,
     };
-  }, [isBrowser, spec, fullUrl, themeOptions, isDarkTheme]);
+  }, [isBrowser, spec, fullUrl, themeOptions]);
+
+  const result = useMemo(() => {
+    return {
+      ...stores,
+      // @ts-expect-error extra prop
+      hasLogo: !!spec.info?.['x-logo'],
+      store: isBrowser && isDarkTheme ? stores.darkStore : stores.lightStore,
+    };
+  }, [isBrowser, isDarkTheme, spec, stores]);
 
   return result;
 }