Safe check changed option when its iterable value becomes scalar (#25855

)

Co-authored-by: Mikhail Preyskurantov <[email protected]>

packages/devextreme-angular/src/core/iterable-differ-helper.ts

@@ -8,6 +8,9 @@ import {
   DxComponent,
 } from './component';
 
+function isIterable(value) {
+  return value && (typeof value[Symbol.iterator] === 'function');
+}
 @Injectable()
 export class IterableDifferHelper {
   private _host: DxComponent;
@@ -53,12 +56,11 @@ export class IterableDifferHelper {
   }
 
   doCheck(prop: string) {
-    if (this._propertyDiffers[prop]) {
+    if (this._propertyDiffers[prop] && this._host.instance) {
       const hostValue = this._host[prop];
-      const isChangedOption = this.checkChangedOptions(prop, hostValue);
+      const changes = isIterable(hostValue) && this.getChanges(prop, hostValue);
 
-      const changes = this.getChanges(prop, hostValue);
-      if (changes && this._host.instance && !isChangedOption) {
+      if (changes && !this.checkChangedOptions(prop, hostValue)) {
         this._host.lockWidgetUpdate();
         this._host.instance.option(prop, hostValue);
       }

packages/devextreme-angular/tests/src/ui/calendar.spec.ts

@@ -0,0 +1,54 @@
+/* tslint:disable:component-selector */
+
+import {
+    Component,
+    ViewChild
+} from '@angular/core';
+
+import { TestBed } from '@angular/core/testing';
+import { BrowserTransferStateModule } from '@angular/platform-browser';
+
+import {
+  DxCalendarModule,
+  DxCalendarComponent,
+} from "devextreme-angular";
+
+@Component({
+    selector: 'test-container-component',
+    template: '',
+})
+class TestContainerComponent {
+    @ViewChild(DxCalendarComponent) calendar: DxCalendarComponent;
+
+    value: any = [];
+}
+
+describe('DxCalendar', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule(
+            {
+                declarations: [TestContainerComponent],
+                imports: [DxCalendarModule, BrowserTransferStateModule]
+            });
+    });
+
+    // spec
+    it('should accept iterable and non-iterable values without exception', () => {
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `<dx-calendar [value]="value" selectionMode="multiple"></dx-calendar>`
+            }
+        });
+
+        const fixture = TestBed.createComponent(TestContainerComponent);
+
+        fixture.detectChanges();
+
+        const calendar = fixture.componentInstance.calendar;
+
+        calendar.selectionMode = 'single';
+        calendar.instance.option('value', new Date());
+
+        fixture.detectChanges();
+    });
+});

playgrounds/angular/src/app/app.component.html

@@ -119,7 +119,13 @@ <h2>Editor Widgets</h2>
 
     <dx-date-box [(value)]="currentDate"></dx-date-box>
 
-    <dx-calendar [(value)]="currentDate"></dx-calendar>
+    <dx-calendar #calendar [value]="value" [selectionMode]="selectionMode">
+    </dx-calendar>
+    <dx-select-box
+      [dataSource]="selectionModes"
+      [(value)]="selectionMode"
+    >
+    </dx-select-box>
 
     <h2>Custom Templates</h2>
 

playgrounds/angular/src/app/app.component.ts

@@ -99,6 +99,14 @@ import {
 })
 export class AppComponent implements OnInit, AfterViewInit {
   @ViewChild(DxPopoverComponent) popover: DxPopoverComponent;
+
+  value: any = [
+    new Date(),
+    new Date(new Date().getTime() + 1000 * 60 * 60 * 24)
+  ];
+  selectionModes: string[] = ["single", "multiple", "range"];
+  selectionMode = "multiple";
+
   text = 'Initial text';
   formData = { email: '', password: '' };
   emailControl: AbstractControl;