From 20843f4271bc0ca97f71c52b90d2afbd43132f00 Mon Sep 17 00:00:00 2001
From: David LJ <mail@davidlj95.com>
Date: Sun, 15 Oct 2023 05:11:17 +0200
Subject: [PATCH] feat(chipped-content): scroll to show displayed content
 (#110)

* feat(chipped-content): scroll to show displayed content

* refactor(chipped-content): simplify content change method
---
 .../chipped-content/chipped-content.component.ts   | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/app/about/chipped-content/chipped-content.component.ts b/src/app/about/chipped-content/chipped-content.component.ts
index de6e830e..7e46c9ff 100644
--- a/src/app/about/chipped-content/chipped-content.component.ts
+++ b/src/app/about/chipped-content/chipped-content.component.ts
@@ -60,20 +60,24 @@ export class ChippedContentComponent implements OnInit {
   }
 
   async setSelectedContent(id: string) {
+    const content = this.contents.find((content) => content.id === id)!
+    this.contentHost.clear()
+
     // Tapping same chip hides content
     if (this.selectedContentId === id) {
-      const content = this.contents.find((content) => content.id === id)!
-      this.contentHost.clear()
       this.selectedContentId = undefined
       await content.waitForAnimationEnd(this.selectedContentComponent)
       this.contentDisplayedChange.emit(false)
       return
     }
+
     this.selectedContentId = id
-    this.contentHost.clear()
-    const content = this.contents.find((content) => content.id === id)!
-    this.addContentToHost(content)
+    const componentRef = this.addContentToHost(content)
     this.contentDisplayedChange.emit(true)
+    await content.waitForAnimationEnd(componentRef.instance)
+    ;(componentRef.location.nativeElement as HTMLElement).scrollIntoView({
+      block: 'nearest',
+    })
   }
 
   private hideContentElement(elementRef: ElementRef) {