Merge branch 'master' into ganastasov/fix-17275-master

Author: georgianastasov

projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts

@@ -13,7 +13,7 @@ import {
     OverlayCancelableEventArgs, OverlayClosingEventArgs, OverlayEventArgs, OverlaySettings,
     WEEKDAYS
 } from 'igniteui-angular/core';
-import { ChangeDetectorRef, Component, DebugElement, ElementRef, EventEmitter, Injector, QueryList, Renderer2, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, DebugElement, ElementRef, EventEmitter, Injector, provideZonelessChangeDetection, QueryList, Renderer2, ViewChild } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { PickerCalendarOrientation, PickerHeaderOrientation, PickerInteractionMode } from '../../../core/src/date-common/types';
 import { DatePart } from '../../../core/src/date-common/public_api';
@@ -903,8 +903,8 @@ describe('IgxDatePicker', () => {
                 get: mockNgControl
             });
 
-            mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['detectChanges']);
-            mockCalendar = { selected: new EventEmitter<any>(), selectDate: () => {} };
+            mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['detectChanges', 'markForCheck']);
+            mockCalendar = { selected: new EventEmitter<any>(), selectDate: () => { } };
             const mockComponentInstance = {
                 calendar: mockCalendar,
                 todaySelection: new EventEmitter<any>(),
@@ -1665,6 +1665,44 @@ describe('IgxDatePicker', () => {
             });
         });
     });
+
+    describe('Zoneless', () => {
+        let fixture: ComponentFixture<IgxDatePickerNgModelComponent>;
+        let datePicker: IgxDatePickerComponent;
+
+        beforeEach(async () => {
+            await TestBed.configureTestingModule({
+                imports: [
+                    NoopAnimationsModule,
+                    IgxDatePickerNgModelComponent,
+                ],
+                providers: [
+                    provideZonelessChangeDetection()
+                ]
+            }).compileComponents();
+
+            fixture = TestBed.createComponent(IgxDatePickerNgModelComponent);
+            fixture.detectChanges();
+        });
+
+        it('should not throw ExpressionChangedAfterItHasBeenCheckedError when closing - issue #17305', fakeAsync(() => {
+            datePicker = fixture.componentInstance.datePicker;
+
+            datePicker.open();
+            fixture.detectChanges();
+            tick();
+
+            expect(() => {
+                datePicker.close();
+                fixture.detectChanges();
+            }).not.toThrow();
+
+            fixture.detectChanges();
+            tick(100);
+            const input = fixture.debugElement.query(By.css('input'));
+            expect(input.nativeElement.getAttribute('aria-expanded')).toBe('false');
+        }));
+    });
 });
 @Component({
     template: `

projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts

@@ -904,6 +904,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
             this._initializeCalendarContainer(e.componentRef.instance);
             this._calendarContainer = e.componentRef.location.nativeElement;
             this._collapsed = false;
+            this.cdr.markForCheck();
         });
 
         this._overlayService.opened.pipe(...this._overlaySubFilter).subscribe(() => {
@@ -936,6 +937,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
             this._overlayId = null;
             this._calendar = null;
             this._calendarContainer = undefined;
+            this.cdr.markForCheck();
         });
     }
 

projects/igniteui-angular/grids/grid/src/grid-base.directive.ts

@@ -7767,12 +7767,18 @@ export abstract class IgxGridBaseDirective implements GridType,
         this.verticalScrollContainer.onScroll(event);
         this.disableTransitions = true;
 
-        this.zone.onStable.pipe(first()).subscribe(() => {
+        const callback = () => {
             this.verticalScrollContainer.chunkLoad.emit(this.verticalScrollContainer.state);
             if (this.rowEditable) {
                 this.changeRowEditingOverlayStateOnScroll(this.crudService.rowInEditMode);
             }
-        });
+        };
+        if (this.isZonelessChangeDetection()) {
+            this.cdr.detectChanges();
+            callback();
+        } else {
+            this.zone.onStable.pipe(first()).subscribe(callback);
+        }
         this.disableTransitions = false;
 
         this.hideOverlays();
@@ -7797,6 +7803,10 @@ export abstract class IgxGridBaseDirective implements GridType,
         this.gridScroll.emit(args);
     }
 
+    protected isZonelessChangeDetection(): boolean {
+        return this.zone.constructor.name === 'NoopNgZone';
+    }
+
     protected hasMenuPinningActions(): boolean {
         const strip = this.actionStrip;
         const actionButtons = strip?.actionButtons;

projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.html

@@ -175,6 +175,7 @@
                 [igxForContainerSize]="calcHeight"
                 [igxForItemSize]="renderedRowHeight"
                 [igxForSizePropName]="'height'"
+                [igxForTrackBy]="trackHorizontalRowGroup"
             >
                 <div [attr.data-index]="rowIndex">
                     <igx-pivot-row-dimension-mrl-row [rowIndex]="rowIndex" [rowGroup]="rowGroup" [groupedData]="groupedData" [style.height.px]="renderedRowHeight * rowGroup.length"></igx-pivot-row-dimension-mrl-row>

projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.component.ts

@@ -2,7 +2,7 @@ import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, Ev
 import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 
 import { first, take, takeUntil } from 'rxjs/operators';
-import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxFilteringService, IgxGridNavigationService, IgxGridValidationService, IgxPivotDateDimension, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotUISettings, IPivotValue, IValuesChange, PivotDimensionType, PivotRowLayoutType, PivotSummaryPosition, PivotUtil } from 'igniteui-angular/grids/core';
+import { DEFAULT_PIVOT_KEYS, IDimensionsChange, IgxFilteringService, IgxGridNavigationService, IgxGridValidationService, IgxPivotDateDimension, IgxPivotGridValueTemplateContext, IPivotConfiguration, IPivotConfigurationChangedEventArgs, IPivotDimension, IPivotGridRecord, IPivotUISettings, IPivotValue, IValuesChange, PivotDimensionType, PivotRowLayoutType, PivotSummaryPosition, PivotUtil } from 'igniteui-angular/grids/core';
 import { IgxGridSelectionService } from 'igniteui-angular/grids/core';
 import { GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, IgxColumnTemplateContext, PivotGridType, RowType } from 'igniteui-angular/grids/core';
 import { IgxGridCRUDService } from 'igniteui-angular/grids/core';
@@ -2485,6 +2485,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         }
     }
 
+    protected trackHorizontalRowGroup = (_index: number, rowGroup: IPivotGridRecord[]) => rowGroup[0]?.dataIndex;
+
     /**
      * @hidden @internal
      */