fix(igxCalendar): add trackBy for months and years, #3595

If calendar is shown in overlay, the overlay saves a reference to calendar elementRef. Month and Year templates add click event via host listener. However, both templates redraw themselves. As a result of this elements, where the click event was added, are lost. As a result click does not fire. To fix this we added trackBy in ngFor both for Month and Year templates.
IgniteUI · Jan 18, 2019 · 8ac4095 · 8ac4095
1 parent e62b9cd
commit 8ac4095
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 2 deletions.
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.html b/projects/igniteui-angular/src/lib/calendar/calendar.component.html
@@ -51,15 +51,15 @@ <h2 class="igx-calendar__header-date">
 
 <div *ngIf="isYearView" class="igx-calendar__body" [@animateView]="activeView">
     <div class="igx-calendar__body-row--wrap">
-        <div (onMonthSelection)="changeMonth($event)" [igxCalendarMonth]="month" [index]="i" *ngFor="let month of months; index as i;">
+        <div (onMonthSelection)="changeMonth($event)" [igxCalendarMonth]="month" [index]="i" *ngFor="let month of months; index as i; trackBy: monthTracker">
             {{ formattedMonth(month) | titlecase }}
         </div>
     </div>
 </div>
 
 <div *ngIf="isDecadeView" class="igx-calendar__body" [@animateView]="activeView">
     <div class="igx-calendar__body-column" (wheel)="onScroll($event)" (pan)="onPan($event)">
-        <span (onYearSelection)="changeYear($event)" [igxCalendarYear]="year" *ngFor="let year of decade">
+        <span (onYearSelection)="changeYear($event)" [igxCalendarYear]="year" *ngFor="let year of decade; trackBy: yearTracker">
             {{ formattedYear(year) }}
         </span>
     </div>

diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
@@ -1153,6 +1153,20 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
         return `${item.date.getMonth()}--${item.date.getDate()}`;
     }
 
+    /**
+     * @hidden
+     */
+    public monthTracker(index, item): string {
+        return `${item.getMonth()}}`;
+    }
+
+    /**
+     * @hidden
+     */
+    public yearTracker(index, item): string {
+        return `${item.getFullYear()}}`;
+    }
+
     /**
      * @hidden
      */

diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
@@ -349,6 +349,54 @@ describe('IgxDatePicker', () => {
         expect(document.activeElement).toEqual(todayDate.nativeElement);
     });
 
+    fit('#3595 - Should be able to change year', fakeAsync(() => {
+        const fix = TestBed.createComponent(IgxDatePickerTestComponent);
+        fix.detectChanges();
+
+        const target = fix.debugElement.query(By.css('.igx-icon'));
+        target.nativeElement.dispatchEvent(new Event('click'));
+        tick();
+        fix.detectChanges();
+
+        let year = fix.debugElement.nativeElement.getElementsByClassName('igx-calendar-picker__date')[1];
+        year.dispatchEvent(new Event('click'));
+        tick();
+        fix.detectChanges();
+
+        const firstYear = fix.debugElement.query(By.css('.igx-calendar__year'));
+        const expectedResult = firstYear.nativeElement.innerText;
+        firstYear.nativeElement.dispatchEvent(new Event('click'));
+        tick();
+        fix.detectChanges();
+
+        year = fix.debugElement.nativeElement.getElementsByClassName('igx-calendar-picker__date')[1];
+        expect(year.innerText).toBe(expectedResult);
+    }));
+
+    fit('#3595 - Should be able to change month', fakeAsync(() => {
+        const fix = TestBed.createComponent(IgxDatePickerTestComponent);
+        fix.detectChanges();
+
+        const target = fix.debugElement.query(By.css('.igx-icon'));
+        target.nativeElement.dispatchEvent(new Event('click'));
+        tick();
+        fix.detectChanges();
+
+        let month = fix.debugElement.query(By.css('.igx-calendar-picker__date'));
+        month.nativeElement.dispatchEvent(new Event('click'));
+        tick();
+        fix.detectChanges();
+
+        const firstMonth = fix.debugElement.query(By.css('.igx-calendar__month'));
+        const expectedResult = firstMonth.nativeElement.innerText;
+        firstMonth.nativeElement.dispatchEvent(new Event('click'));
+        tick();
+        fix.detectChanges();
+
+        month = fix.debugElement.query(By.css('.igx-calendar-picker__date'));
+        expect(month.nativeElement.innerText).toBe(expectedResult);
+    }));
+
     describe('EditorProvider', () => {
         it('Should return correct edit element', () => {
             const fixture = TestBed.createComponent(IgxDatePickerTestComponent);