fix(app-switcher): scroll on expansion (#99)

Teradata · Jun 1, 2020 · ed27635 · ed27635
1 parent 0fcbfd1
commit ed27635
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/lib/app-switcher/app-switcher-menu/app-switcher-menu.component.html b/src/lib/app-switcher/app-switcher-menu/app-switcher-menu.component.html
@@ -23,7 +23,14 @@
     </ng-container>
   </mat-action-list>
   <mat-divider class="push-top-sm"></mat-divider>
-  <mat-expansion-panel *ngIf="otherProducts?.length; else explorerMore" class="other-products">
+  <mat-expansion-panel
+    *ngIf="otherProducts?.length; else explorerMore"
+    class="other-products"
+    (afterExpand)="scrollToBottom()"
+    (afterCollapse)="scrollToBottom()"
+    (opened)="scrollToBottom()"
+    (closed)="scrollToBottom()"
+  >
     <mat-expansion-panel-header
       collapsedHeight="48px"
       expandedHeight="48px"

diff --git a/src/lib/app-switcher/app-switcher-menu/app-switcher-menu.component.ts b/src/lib/app-switcher/app-switcher-menu/app-switcher-menu.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, ElementRef } from '@angular/core';
 
 import { IVantageAppSwitcherItem } from '../services/products.service';
 
@@ -13,8 +13,17 @@ export class VantageAppSwitcherMenuComponent {
   @Input() otherProducts: IVantageAppSwitcherItem[];
   @Input() exploreMoreLink: string;
 
+  constructor(private elRef: ElementRef) {}
+
   _blockEvent(event: Event): void {
     event.preventDefault();
     event.stopPropagation();
   }
+
+  scrollToBottom(): void {
+    setTimeout(() => {
+      const elem: HTMLElement = this.elRef.nativeElement.querySelector('.td-menu-content');
+      elem.scrollTop = elem.scrollHeight;
+    });
+  }
 }