Merge pull request #9837 from IgniteUI/bpenkov/date-range-disabled-onpush

Lipata · web-flow · commit fc86df879bb3 · 2021-07-14T15:07:16.000+03:00
Update disabled with CD strategy OnPush
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html
@@ -26,7 +26,7 @@
 <ng-template #defTemplate>
     <igx-input-group [type]="this.type" [displayDensity]="this.displayDensity" (click)="this.open()">
         <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->
-        <input #singleInput igxInput type="text" readonly [placeholder]="this.value ? '' : singleInputFormat"
+        <input #singleInput igxInput type="text" readonly [disabled]="this.disabled" [placeholder]="this.value ? '' : singleInputFormat"
             role="combobox" aria-haspopup="grid" [attr.aria-expanded]="!this.collapsed"
             [attr.aria-labelledby]="this.label?.id"
             [value]="this.value | dateRange: this.appliedFormat : this.locale : this.formatter" />
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync, flush } from '@angular/core/testing';
-import { Component, OnInit, ViewChild, DebugElement } from '@angular/core';
+import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy } from '@angular/core';
 import { IgxInputGroupModule } from '../input-group/public_api';
 import { PickerInteractionMode } from '../date-common/types';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -21,6 +21,8 @@ import { AnimationMetadata, AnimationOptions } from '@angular/animations';
 import { IgxPickersCommonModule } from '../date-common/public_api';
 import { IgxCalendarContainerComponent, IgxCalendarContainerModule } from '../date-common/calendar-container/calendar-container.component';
 import { IgxCalendarComponent } from '../calendar/public_api';
+import { Subject } from 'rxjs';
+import { CommonModule } from '@angular/common';
 
 // The number of milliseconds in one day
 const ONE_DAY = 1000 * 60 * 60 * 24;
@@ -224,7 +226,7 @@ describe('IgxDateRangePicker', () => {
         });
 
         it('should validate correctly minValue and maxValue', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, null, platform, mockInjector, null, null);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, null, platform, mockInjector, null, null, null);
             dateRange.ngOnInit();
 
             // dateRange.calendar = calendar;
@@ -249,7 +251,7 @@ describe('IgxDateRangePicker', () => {
         });
 
         it('should disable calendar dates when min and/or max values as dates are provided', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, ngModuleRef, overlay);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, ngModuleRef, null, overlay);
             dateRange.ngOnInit();
 
             spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar);
@@ -275,7 +277,7 @@ describe('IgxDateRangePicker', () => {
         });
 
         it('should disable calendar dates when min and/or max values as strings are provided', fakeAsync(() => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, null, platform, mockInjector, null, null);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, null, platform, mockInjector, null, null, null);
             dateRange.ngOnInit();
 
             spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar);
@@ -332,17 +334,19 @@ describe('IgxDateRangePicker', () => {
                 TestBed.configureTestingModule({
                     declarations: [
                         DateRangeTestComponent,
-                        DateRangeDefaultComponent
+                        DateRangeDefaultComponent,
+                        DateRangeDisabledComponent
                     ],
                     imports: [
+                        CommonModule,
                         IgxDateRangePickerModule,
                         IgxDateTimeEditorModule,
                         IgxInputGroupModule,
                         IgxIconModule,
                         FormsModule,
                         NoopAnimationsModule,
                         IgxPickersCommonModule,
-                        IgxCalendarContainerModule,
+                        IgxCalendarContainerModule
                     ]
                 })
                     .compileComponents();
@@ -732,6 +736,28 @@ describe('IgxDateRangePicker', () => {
                 fixture.detectChanges();
                 expect(fixture.componentInstance.dateRange.collapsed).toBeTruthy();
             }));
+
+            it('should properly set/update disabled when ChangeDetectionStrategy.OnPush is used', fakeAsync(() => {
+                const testFixture = TestBed
+                    .createComponent(DateRangeDisabledComponent) as ComponentFixture<DateRangeDisabledComponent>;
+                testFixture.detectChanges();
+                dateRange = testFixture.componentInstance.dateRange;
+                const disabled$ = testFixture.componentInstance.disabled$;
+
+                disabled$.next(true);
+                testFixture.detectChanges();
+                expect(dateRange.inputDirective.disabled).toBeTrue();
+
+                disabled$.next(false);
+                testFixture.detectChanges();
+                expect(dateRange.inputDirective.disabled).toBeFalse();
+
+                disabled$.next(true);
+                testFixture.detectChanges();
+                expect(dateRange.inputDirective.disabled).toBeTrue();
+
+                disabled$.complete();
+            }));
         });
 
         describe('Two Inputs', () => {
@@ -743,9 +769,12 @@ describe('IgxDateRangePicker', () => {
                     declarations: [
                         DateRangeTestComponent,
                         DateRangeTwoInputsTestComponent,
-                        DateRangeTwoInputsNgModelTestComponent
+                        DateRangeTwoInputsNgModelTestComponent,
+                        DateRangeDisabledComponent,
+                        DateRangeTwoInputsDisabledComponent
                     ],
                     imports: [
+                        CommonModule,
                         IgxDateRangePickerModule,
                         IgxDateTimeEditorModule,
                         IgxPickersCommonModule,
@@ -1116,6 +1145,31 @@ describe('IgxDateRangePicker', () => {
                 expect(fixture.componentInstance.dateRange.collapsed).toBeTruthy();
             }));
 
+            it('should properly set/update disabled when ChangeDetectionStrategy.OnPush is used', fakeAsync(() => {
+                const testFixture = TestBed
+                    .createComponent(DateRangeTwoInputsDisabledComponent) as ComponentFixture<DateRangeTwoInputsDisabledComponent>;
+                testFixture.detectChanges();
+                dateRange = testFixture.componentInstance.dateRange;
+                const disabled$ = testFixture.componentInstance.disabled$;
+
+                disabled$.next(true);
+                testFixture.detectChanges();
+                expect(dateRange.projectedInputs.first.inputDirective.disabled).toBeTrue();
+                expect(dateRange.projectedInputs.last.inputDirective.disabled).toBeTrue();
+
+                disabled$.next(false);
+                testFixture.detectChanges();
+                expect(dateRange.projectedInputs.first.inputDirective.disabled).toBeFalse();
+                expect(dateRange.projectedInputs.last.disabled).toBeFalse();
+
+                disabled$.next(true);
+                testFixture.detectChanges();
+                expect(dateRange.projectedInputs.first.inputDirective.disabled).toBeTrue();
+                expect(dateRange.projectedInputs.last.inputDirective.disabled).toBeTrue();
+
+                disabled$.complete();
+            }));
+
             describe('Data binding', () => {
                 it('should properly update component value with ngModel bound to projected inputs - #7353', fakeAsync(() => {
                     fixture = TestBed.createComponent(DateRangeTwoInputsNgModelTestComponent);
@@ -1417,3 +1471,30 @@ export class DateRangeCustomComponent extends DateRangeTestComponent {
 export class DateRangeTemplatesComponent extends DateRangeTestComponent {
     public range;
 }
+
+@Component({
+    template: `<igx-date-range-picker [disabled]="(disabled$ | async) === true"></igx-date-range-picker>`,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DateRangeDisabledComponent extends DateRangeTestComponent {
+    public disabled$ = new Subject<boolean>();
+
+    constructor() {
+        super();
+        this.disabled$.subscribe({ next: (v) => v });
+    }
+}
+
+@Component({
+    template: `
+    <igx-date-range-picker [disabled]="(disabled$ | async) === true">
+        <igx-date-range-start>
+            <input igxInput igxDateTimeEditor>
+        </igx-date-range-start>
+        <igx-date-range-end>
+            <input igxInput igxDateTimeEditor>
+        </igx-date-range-end>
+    </igx-date-range-picker>`,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DateRangeTwoInputsDisabledComponent extends DateRangeDisabledComponent { }
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -1,5 +1,5 @@
 import {
-    AfterViewInit, Component, ContentChild, ContentChildren, ElementRef,
+    AfterViewInit, ChangeDetectorRef, Component, ContentChild, ContentChildren, ElementRef,
     EventEmitter, HostBinding, HostListener, Inject, Injector, Input, LOCALE_ID,
     NgModuleRef,
     OnChanges, OnDestroy, OnInit, Optional, Output, QueryList,
@@ -447,6 +447,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         protected platform: PlatformUtil,
         private _injector: Injector,
         private _moduleRef: NgModuleRef<any>,
+        private _cdr: ChangeDetectorRef,
         @Inject(IgxOverlayService) private _overlayService: IgxOverlayService,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions?: IDisplayDensityOptions,
         @Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType?: IgxInputGroupType) {
@@ -632,6 +633,14 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
             this.updateDisabledState();
             this.initialSetValue();
             this.updateInputs();
+            // B.P. 07 July 2021 - IgxDateRangePicker not showing initial disabled state with ChangeDetectionStrategy.OnPush #9776
+            /**
+             * if disabled is placed on the range picker element and there are projected inputs
+             * run change detection since igxInput will initially set the projected inputs' disabled to false
+             */
+            if (this.hasProjectedInputs && this.disabled) {
+                this._cdr.markForCheck();
+            }
         });
         this.updateDisplayFormat();
         this.updateInputFormat();
@@ -791,9 +800,6 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
             end.inputDirective.disabled = this.disabled;
             return;
         }
-        if (this.inputDirective) {
-            this.inputDirective.disabled = this.disabled;
-        }
     }
 
     private getInputState(focused: boolean): IgxInputState {
