From e16bbcdc513922242c6b45f6a4bffec6443c464d Mon Sep 17 00:00:00 2001
From: Matthieu Riegler <kyro38@gmail.com>
Date: Thu, 6 Mar 2025 10:27:00 +0100
Subject: [PATCH] docs(docs-infra): fix initial TOC selection (#60240)

PR Close #60240
---
 .../services/table-of-contents-loader.service.ts   | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/adev/shared-docs/services/table-of-contents-loader.service.ts b/adev/shared-docs/services/table-of-contents-loader.service.ts
index f526b9d7991..e3fb9153c5b 100644
--- a/adev/shared-docs/services/table-of-contents-loader.service.ts
+++ b/adev/shared-docs/services/table-of-contents-loader.service.ts
@@ -71,18 +71,24 @@ export class TableOfContentsLoader {
     destroyRef: DestroyRef,
     onActiveId: (id: string) => void,
   ): void {
-    this.getHeadings(element).forEach((heading) => {
+    // If we're at the top the we need the default active id to be the first heading.
+    const headings = this.getHeadings(element);
+    onActiveId(headings[0].id);
+
+    headings.forEach((heading) => {
       const ioConfiguration = {
         /**
-         * This rootMargin creates a horizontal line at 20% from the top of the viewport
+         * This rootMargin creates a horizontal line at 5% from the top of the viewport
          * that will help trigger an intersection at that the very point.
          */
-        rootMargin: '-5% 0% -95% 0%',
+        rootMargin: '0% 0% -95% 0%',
         /** 0 is the default  */
         threshold: 0,
       };
       const observer = new IntersectionObserver((entries, o) => {
-        onActiveId(entries[0].target.id);
+        if (entries[0].isIntersecting) {
+          onActiveId(entries[0].target.id);
+        }
       }, ioConfiguration);
       observer.observe(heading);
       destroyRef.onDestroy(() => observer.disconnect());