Merge pull request #17307 from IgniteUI/bpachilova/date-picker-ng0100-17305-21.2.x

fix(date-picker): invoke markForCheck() on overlay open/close to prevent NG0100 in zoneless apps - 21.2.x

Author: kacheshmarova

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();
         });
     }