fix(calendar): Memory leaks due to wrong event listener pattern

Author: pmoleri

projects/igniteui-angular/src/lib/calendar/calendar.component.html

@@ -189,6 +189,8 @@ <h2 id="igx-aria-calendar-title-month" class="igx-calendar__header-date">
     [attr.aria-multiselectable]="selection !== 'single'"
     aria-labelledby="calendar-desc"
     role="grid"
+    (focus)="this.onWrapperFocus($event)"
+    (blur)="this.onWrapperBlur($event)"
     >
     <caption id="calendar-desc" tabindex="-1" class="igx-calendar__aria-off-screen">
         @if (selection === 'multi') {

projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts

@@ -128,7 +128,7 @@ describe("IgxCalendar - ", () => {
     });
 
     describe("Basic -", () => {
-        configureTestSuite();
+        configureTestSuite({ checkLeaks: true });
 
         beforeAll(waitForAsync(() => {
             TestBed.configureTestingModule({
@@ -154,6 +154,11 @@ describe("IgxCalendar - ", () => {
                 calendar = fixture.componentInstance.calendar;
                 dom = fixture.debugElement;
             }));
+            afterEach(() => {
+                fixture = undefined;
+                calendar = undefined;
+                dom = undefined;
+            });
 
             it("Should initialize a calendar component", () => {
                 expect(fixture.componentInstance).toBeDefined();

projects/igniteui-angular/src/lib/calendar/calendar.component.ts

@@ -483,9 +483,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
             .set("PageUp", this.handlePageUp)
             .set("PageDown", this.handlePageDown);
 
-        this.wrapper.nativeElement.addEventListener('focus', (event: FocusEvent) => this.onWrapperFocus(event));
-        this.wrapper.nativeElement.addEventListener('blur', (event: FocusEvent) => this.onWrapperBlur(event));
-
         this.startPageScroll$.pipe(
             takeUntil(this.stopPageScroll$),
             switchMap(() => this.scrollPage$.pipe(
@@ -516,12 +513,12 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
         });
     }
 
-    private onWrapperFocus(_event: FocusEvent) {
+    protected onWrapperFocus(_event: FocusEvent) {
         this.showActiveDay = true;
         this.monthViews.forEach(view => view.changePreviewRange(this.activeDate));
     }
 
-    private onWrapperBlur(_event: FocusEvent) {
+    protected onWrapperBlur(_event: FocusEvent) {
         this.showActiveDay = false;
         this.monthViews.forEach(view => view.clearPreviewRange());
         this._onTouchedCallback();
@@ -1059,8 +1056,6 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
 	 */
 	public ngOnDestroy(): void {
         this.keyboardNavigation.detachKeyboardHandlers();
-        this.wrapper?.nativeElement.removeEventListener('focus', this.onWrapperFocus);
-        this.wrapper?.nativeElement.removeEventListener('blur', this.onWrapperBlur);
 	}
 
 	/**

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.html

@@ -102,6 +102,8 @@
     [attr.aria-multiselectable]="selection !== 'single'"
     aria-labelledby="calendar-desc"
     role="grid"
+    (focus)="this.onWrapperFocus($event)";
+    (blur)="this.onWrapperBlur($event)";
     >
     <caption id="calendar-desc" tabindex="-1" class="igx-calendar__aria-off-screen">
         {{ resourceStrings.igx_calendar_singular_single_selection}}

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts

@@ -331,9 +331,6 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
             .set("PageUp", this.handlePageUp)
             .set("PageDown", this.handlePageDown);
 
-        this.wrapper.nativeElement.addEventListener('focus', (event: FocusEvent) => this.onWrapperFocus(event));
-        this.wrapper.nativeElement.addEventListener('blur', (event: FocusEvent) => this.onWrapperBlur(event));
-
         this.activeView$.subscribe((view) => {
             this.activeViewChanged.emit(view);
 
@@ -344,12 +341,12 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
         });
     }
 
-    private onWrapperFocus(event: FocusEvent) {
+    protected onWrapperFocus(event: FocusEvent) {
         event.stopPropagation();
         this.showActiveDay = true;
     }
 
-    private onWrapperBlur(event: FocusEvent) {
+    protected onWrapperBlur(event: FocusEvent) {
         event.stopPropagation();
 
         this.showActiveDay = false;
@@ -456,8 +453,6 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
 	 */
 	public ngOnDestroy(): void {
         this.keyboardNavigation.detachKeyboardHandlers();
-        this.wrapper?.nativeElement.removeEventListener('focus', this.onWrapperFocus);
-        this.wrapper?.nativeElement.removeEventListener('blur', this.onWrapperBlur);
 	}
 
 	/**