Browse Source

fix(home): reset main-content scroll on route navigation so pages open at the top

PROD-8423: .tb-main-content (the scroll container holding the router-outlet in home.component.html) keeps its scrollTop across route changes, so navigating from a scrolled-down IoT Hub home to a child page (e.g. Calculated Fields) opened the new page already scrolled. Angular's scrollPositionRestoration only handles window scroll, not arbitrary containers. Add a #mainContent ref, capture the ElementRef, and reset its scroll position in the existing (activate) handler so every route navigation lands at the top.
pull/15842/head
Igor Kulikov 4 weeks ago
parent
commit
304904cedb
  1. 2
      ui-ngx/src/app/modules/home/home.component.html
  2. 3
      ui-ngx/src/app/modules/home/home.component.ts

2
ui-ngx/src/app/modules/home/home.component.html

@ -79,7 +79,7 @@
<mat-progress-bar color="warn" style="z-index: 10; margin-bottom: -4px; width: 100%;" mode="indeterminate"
*ngIf="!hideLoadingBar && (isLoading$ | async)">
</mat-progress-bar>
<div tb-toast class="tb-main-content flex flex-1 flex-col">
<div #mainContent tb-toast class="tb-main-content flex flex-1 flex-col">
<router-outlet (activate)="activeComponentChanged($event)"></router-outlet>
</div>
</div>

3
ui-ngx/src/app/modules/home/home.component.ts

@ -58,6 +58,8 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
@ViewChild('sidenav')
sidenav: MatSidenav;
@ViewChild('mainContent', { static: true }) mainContent: ElementRef<HTMLElement>;
@ViewChild('searchInput') searchInputField: ElementRef;
fullscreenEnabled = screenfull.isEnabled;
@ -136,6 +138,7 @@ export class HomeComponent extends PageComponent implements AfterViewInit, OnIni
activeComponentChanged(activeComponent: any) {
this.activeComponentService.setCurrentActiveComponent(activeComponent);
this.mainContent?.nativeElement?.scrollTo({ top: 0, left: 0 });
if (!this.activeComponent) {
setTimeout(() => {
this.updateActiveComponent(activeComponent);

Loading…
Cancel
Save