From 31fd3a351e165e22abefeaf011594431fe399bfc Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 9 Mar 2021 18:56:54 +0300
Subject: [PATCH] Fixing root element for mutation observer

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/scroll-spy/scroll-spy.tsx | 8 ++++++--
 src/renderer/hooks/useMutationObserver.ts         | 9 +++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/scroll-spy/scroll-spy.tsx b/src/renderer/components/scroll-spy/scroll-spy.tsx
index c93231d7d8..b9682833ee 100644
--- a/src/renderer/components/scroll-spy/scroll-spy.tsx
+++ b/src/renderer/components/scroll-spy/scroll-spy.tsx
@@ -20,8 +20,12 @@ export function ScrollSpy(props: Props) {
     }
   };
 
+  const getSectionsParentElement = () => {
+    return sections.current?.[0].parentElement;
+  };
+
   const updateNavigation = () => {
-    setTree(getNavigation(sections.current[0].parentElement));
+    setTree(getNavigation(getSectionsParentElement()));
   };
 
   const getNavigation = (element: Element) => {
@@ -82,7 +86,7 @@ export function ScrollSpy(props: Props) {
     updateNavigation();
   }, [activeElementId]);
 
-  useMutationObserver(parent, updateNavigation);
+  useMutationObserver(getSectionsParentElement(), updateNavigation);
 
   return (
     <div className="ScrollSpy" ref={parent}>
diff --git a/src/renderer/hooks/useMutationObserver.ts b/src/renderer/hooks/useMutationObserver.ts
index e08999ab9b..327f1e1997 100644
--- a/src/renderer/hooks/useMutationObserver.ts
+++ b/src/renderer/hooks/useMutationObserver.ts
@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect } from "react";
+import { useEffect } from "react";
 
 const config: MutationObserverInit = {
   subtree: true,
@@ -8,15 +8,16 @@ const config: MutationObserverInit = {
 };
 
 export function useMutationObserver(
-  ref: MutableRefObject<HTMLElement>,
+  root: Element,
   callback: MutationCallback,
   options: MutationObserverInit = config
 ) {
+
   useEffect(() => {
-    if (ref.current) {
+    if (root) {
       const observer = new MutationObserver(callback);
 
-      observer.observe(ref.current, options);
+      observer.observe(root, options);
 
       return () => {
         observer.disconnect();