From 830eac395202ac5565700f05abb8c9882ec6ed63 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 5 Mar 2021 15:34:33 +0300
Subject: [PATCH] Fixing firing intersection on parent sections

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/+preferences/preferences.tsx        | 14 ++++++++++----
 src/renderer/components/scroll-spy/scroll-spy.tsx  | 11 ++++++-----
 src/renderer/components/tree-view/tree-view.scss   |  2 +-
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index 5869fbe481..8fc3cf9764 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -38,8 +38,10 @@ export class Preferences extends React.Component {
         contentGaps={false}
         header={header}
       >
-        <section id="application">
-          <h1>Application</h1>
+        <section id="application" title="Application">
+          <section>
+            <h1>Application</h1>
+          </section>
           <section id="appearance">
             <h2>Appearance</h2>
             <SubTitle title="Theme"/>
@@ -87,7 +89,9 @@ export class Preferences extends React.Component {
         </section>
 
         <section id="kubernetes">
-          <h1>Kubernetes</h1>
+          <section>
+            <h1>Kubernetes</h1>
+          </section>
           <section id="kubectl">
             <h2>Kubectl binary</h2>
             <KubectlBinaries preferences={preferences}/>
@@ -99,7 +103,9 @@ export class Preferences extends React.Component {
         </section>
 
         <section id="extensions">
-          <h1>Extensions</h1>
+          <section>
+            <h1>Extensions</h1>
+          </section>
           {appPreferenceRegistry.getItems().map(({ title, components: { Hint, Input } }, index) => {
             return (
               <section key={index} id={title}>
diff --git a/src/renderer/components/scroll-spy/scroll-spy.tsx b/src/renderer/components/scroll-spy/scroll-spy.tsx
index a414c82054..eb6df9375b 100644
--- a/src/renderer/components/scroll-spy/scroll-spy.tsx
+++ b/src/renderer/components/scroll-spy/scroll-spy.tsx
@@ -29,7 +29,7 @@ export function ScrollSpy(props: Props) {
 
     sections.forEach(section => {
       const id = section.getAttribute("id");
-      const name = section.querySelector(":first-child").textContent;
+      const name = section.querySelector("h1, h2, h3, h4, h5, h6").textContent;
       const selected = id === activeElementId;
 
       if (!name || !id) {
@@ -47,9 +47,9 @@ export function ScrollSpy(props: Props) {
     return children;
   };
 
-  const handleIntersect = (entries: IntersectionObserverEntry[]) => {
-    if (entries[0].isIntersecting) {
-      setActiveElementId(entries[0].target.id);
+  const handleIntersect = ([entry]: IntersectionObserverEntry[]) => {
+    if (entry.isIntersecting) {
+      setActiveElementId(entry.target.closest("section[id]").id);
     }
   };
 
@@ -61,8 +61,9 @@ export function ScrollSpy(props: Props) {
 
     sections.current.forEach((section) => {
       const observer = new IntersectionObserver(handleIntersect, options);
+      const target = section.querySelector("section") || section;
 
-      observer.observe(section);
+      observer.observe(target);
     });
   };
 
diff --git a/src/renderer/components/tree-view/tree-view.scss b/src/renderer/components/tree-view/tree-view.scss
index 2817d5ddb7..fbcafebb21 100644
--- a/src/renderer/components/tree-view/tree-view.scss
+++ b/src/renderer/components/tree-view/tree-view.scss
@@ -10,7 +10,7 @@
       border: 1px solid transparent;
     }
 
-    &.selected {
+    &.selected, &:focus {
       > .MuiTreeItem-content .MuiTreeItem-label {
         border-color: var(--blue);
         font-weight: bold;