Merge pull request #2519 from rsu-bankdata/fix/page-leak

Fix memory leak in kirby-page
kirbydesign · Oct 5, 2022 · e4e52b6 · e4e52b6
2 parents 1b00cf6 + fdfbdce
commit e4e52b6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/libs/designsystem/src/lib/components/page/page.component.spec.ts b/libs/designsystem/src/lib/components/page/page.component.spec.ts
@@ -12,7 +12,7 @@ import { FitHeadingDirective } from '../../directives/fit-heading/fit-heading.di
 import { TestHelper } from '../../testing/test-helper';
 import { WindowRef } from '../../types/window-ref';
 import { ModalNavigationService } from '../modal/services/modal-navigation.service';
-import { TabsComponent } from '../tabs';
+import { selectedTabClickEvent, TabsComponent } from '../tabs';
 
 import { PageComponent, PageContentComponent } from './page.component';
 
@@ -300,6 +300,17 @@ describe('PageComponent', () => {
     });
   });
 
+  describe('tab navigation', () => {
+    it('should scroll to top when tab is clicked', () => {
+      const scrollToTopSpy = jasmine.createSpy();
+      (spectator.component as any).content.scrollToTop = scrollToTopSpy;
+
+      window.dispatchEvent(new Event(selectedTabClickEvent));
+
+      expect(scrollToTopSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
   const navigateUrls = (urls: string[]) => {
     urls.forEach((url: string) => navigateToUrl(url));
   };

diff --git a/libs/designsystem/src/lib/components/page/page.component.ts b/libs/designsystem/src/lib/components/page/page.component.ts
@@ -186,7 +186,7 @@ export class PageComponent
   @Output() refresh = new EventEmitter<PullToRefreshEvent>();
   @Output() backButtonClick = new EventEmitter<Event>();
 
-  @ViewChild(IonContent, { static: true }) private content: IonContent;
+  @ViewChild(IonContent, { static: true }) private content?: IonContent;
   @ViewChild(IonContent, { static: true, read: ElementRef })
   private ionContentElement: ElementRef<HTMLIonContentElement>;
   @ViewChild(IonHeader, { static: true, read: ElementRef })
@@ -250,7 +250,6 @@ export class PageComponent
     private renderer: Renderer2,
     private router: Router,
     private changeDetectorRef: ChangeDetectorRef,
-    private windowRef: WindowRef,
     private modalNavigationService: ModalNavigationService,
     @Optional() @SkipSelf() private tabsComponent: TabsComponent
   ) {}
@@ -294,10 +293,6 @@ export class PageComponent
       }
     });
 
-    this.windowRef.nativeWindow.addEventListener(selectedTabClickEvent, () => {
-      this.content.scrollToTop(KirbyAnimation.Duration.LONG);
-    });
-
     this.interceptBackButtonClicksSetup();
   }
 
@@ -313,9 +308,6 @@ export class PageComponent
     this.ngOnDestroy$.complete();
 
     this.pageTitleIntersectionObserverRef.disconnect();
-    this.windowRef.nativeWindow.removeEventListener(selectedTabClickEvent, () => {
-      this.content.scrollToTop(KirbyAnimation.Duration.LONG);
-    });
   }
 
   delegateRefreshEvent(event: any): void {
@@ -448,4 +440,11 @@ export class PageComponent
   _onKeyboardWillHide() {
     this.ionContentElement.nativeElement.style.setProperty('--keyboard-offset', '0px');
   }
+
+  @HostListener(`window:${selectedTabClickEvent}`)
+  _onSelectedTabClick() {
+    if (this.content) {
+      this.content.scrollToTop(KirbyAnimation.Duration.LONG);
+    }
+  }
 }