From 9d351166c3e648c134cb99cca41129a2c6007a28 Mon Sep 17 00:00:00 2001
From: Rohit Gohri <work@rohit.page>
Date: Mon, 28 Mar 2022 11:13:17 +0530
Subject: [PATCH] Disable menu/scroll tracking in ApiSchema (#158)

---
 .changeset/orange-peaches-applaud.md             |  5 +++++
 .../src/theme/ApiSchema/ApiSchema.tsx            | 12 ++++++++++--
 .../docusaurus-theme-redoc/src/utils/useSpec.ts  | 16 +++++++++++-----
 3 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/orange-peaches-applaud.md

diff --git a/.changeset/orange-peaches-applaud.md b/.changeset/orange-peaches-applaud.md
new file mode 100644
index 00000000..e8eb96cb
--- /dev/null
+++ b/.changeset/orange-peaches-applaud.md
@@ -0,0 +1,5 @@
+---
+'docusaurus-theme-redoc': patch
+---
+
+Disable anchor tracking on scroll in ApiSchema component
diff --git a/packages/docusaurus-theme-redoc/src/theme/ApiSchema/ApiSchema.tsx b/packages/docusaurus-theme-redoc/src/theme/ApiSchema/ApiSchema.tsx
index ee25af6b..e5ccc7e8 100644
--- a/packages/docusaurus-theme-redoc/src/theme/ApiSchema/ApiSchema.tsx
+++ b/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}>
diff --git a/packages/docusaurus-theme-redoc/src/utils/useSpec.ts b/packages/docusaurus-theme-redoc/src/utils/useSpec.ts
index 4c8b96d0..2688b542 100644
--- a/packages/docusaurus-theme-redoc/src/utils/useSpec.ts
+++ b/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;
 }