Fix firing onValueChanged event when changing a value of dxTagBox (#708)

DevExpress · Mar 7, 2018 · 6a45794 · 6a45794
1 parent aa7000a
commit 6a45794
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/src/core/component.ts b/src/core/component.ts
@@ -64,6 +64,9 @@ export abstract class DxComponent implements AfterViewInit, DoCheck, OnChanges,
         }
         return true;
     }
+    clearChangedOptions() {
+        this.changedOptions = {};
+    }
     protected _getOption(name: string) {
         return this.instance ?
             this.instance.option(name) :

diff --git a/src/core/iterable-differ-helper.ts b/src/core/iterable-differ-helper.ts
@@ -48,12 +48,19 @@ export class IterableDifferHelper {
         }
     }
 
+    checkChangedOptions(propName: string, hostValue: any) {
+        return this._host.changedOptions[propName] === hostValue;
+    };
+
     doCheck(prop: string) {
         if (this._propertyDiffers[prop]) {
-            const changes = this.getChanges(prop, this._host[prop]);
-            if (changes && this._host.instance) {
+            let hostValue = this._host[prop],
+                isChangedOption = this.checkChangedOptions(prop, hostValue);
+
+            const changes = this.getChanges(prop, hostValue);
+            if (changes && this._host.instance && !isChangedOption) {
                 this._host.lockWidgetUpdate();
-                this._host.instance.option(prop, this._host[prop]);
+                this._host.instance.option(prop, hostValue);
             }
         }
     }

diff --git a/templates/component.tst b/templates/component.tst
@@ -175,6 +175,7 @@ export class <#= it.className #>Component extends <#= baseClass #> <#? implement
         this._idh.doCheck('<#= prop #>');<#~#>
         this._watcherHelper.checkWatchers();
         super.ngDoCheck();
+        super.clearChangedOptions();
     }
 
     _setOption(name: string, value: any) {

diff --git a/tests/src/ui/tag-box.spec.ts b/tests/src/ui/tag-box.spec.ts
@@ -58,4 +58,24 @@ describe('DxTagBox', () => {
         fixture.detectChanges();
         expect(testSpy).toHaveBeenCalledTimes(1);
     }));
+
+    it('value change should be fired once after remove tag', async(() => {
+        let testSpy = spyOn(TestContainerComponent.prototype, 'testMethod');
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `
+                    <dx-tag-box [items]="[1, 2, 3]" [value]="[1, 2]" (onValueChanged)="testMethod()">
+                    </dx-tag-box>
+                `
+            }
+        });
+        let fixture = TestBed.createComponent(TestContainerComponent);
+        fixture.detectChanges();
+        expect(testSpy).toHaveBeenCalledTimes(0);
+        let instance: any = fixture.componentInstance.tagBox.instance,
+            removeButton = instance.element().querySelector('.dx-tag-remove-button');
+        removeButton.click();
+        fixture.detectChanges();
+        expect(testSpy).toHaveBeenCalledTimes(1);
+    }));
 });