From 8a8181a54dc13ff591f5c6759740a4e44dc5f41e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kubiak?= <pawel.kubiak.dev@gmail.com>
Date: Sat, 30 Mar 2024 02:29:36 +0100
Subject: [PATCH] fix(docs-infra): scrolling experience in API Reference
 (#55133)

Fix scrolling experience in API Reference:
- set correct margin top for members container (right side) which is aligned with tabs (left side)
- prevent scroll on focus
- remove redundant blur calls

PR Close #55133
---
 .../services/reference-scroll-handler.service.ts   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/adev/src/app/features/references/services/reference-scroll-handler.service.ts b/adev/src/app/features/references/services/reference-scroll-handler.service.ts
index 001af493d97..c06738f0295 100644
--- a/adev/src/app/features/references/services/reference-scroll-handler.service.ts
+++ b/adev/src/app/features/references/services/reference-scroll-handler.service.ts
@@ -160,9 +160,6 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
       for (const line of Array.from(activeLines)) {
         line.classList.remove(API_TAB_ACTIVE_CODE_LINE);
       }
-      this.getAllMemberCards().forEach((card) => {
-        card.blur();
-      });
     } else {
       const lines = this.document.querySelectorAll<HTMLButtonElement>(
         `button[${MEMBER_ID_ATTRIBUTE}="${currentActiveMemberId}"]`,
@@ -170,7 +167,7 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
       for (const line of Array.from(lines)) {
         line.classList.add(API_TAB_ACTIVE_CODE_LINE);
       }
-      this.document.getElementById(`${currentActiveMemberId}`)?.focus();
+      this.document.getElementById(`${currentActiveMemberId}`)?.focus({preventScroll: true});
     }
   }
 
@@ -179,7 +176,9 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
       return;
     }
 
-    card.focus();
+    if (card !== <HTMLElement>document.activeElement) {
+      (<HTMLElement>document.activeElement).blur();
+    }
 
     this.window.scrollTo({
       top: card!.offsetTop - this.membersMarginTopInPx(),
@@ -211,8 +210,9 @@ export class ReferenceScrollHandler implements OnDestroy, ReferenceScrollHandler
 
     this.resizeObserver = new ResizeObserver((_) => {
       this.ngZone.run(() => {
-        if (tabBody.offsetTop) {
-          this.membersMarginTopInPx.set(tabBody.offsetTop);
+        const offsetTop = tabBody.getBoundingClientRect().top;
+        if (offsetTop) {
+          this.membersMarginTopInPx.set(offsetTop);
         }
       });
     });