fix: clear previous model then setting new programatically (#346)

fixes #343
ng-select · Mar 13, 2018 · 3311f8c · 3311f8c
1 parent acdf5c2
commit 3311f8c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/demo/app/examples/multi.component.ts b/demo/app/examples/multi.component.ts
@@ -22,6 +22,7 @@ import { DataService } from '../shared/data.service';
                 <li *ngFor="let item of selectedPeople1">{{item.name}}</li>
             </ul>
             <button (click)="clearModel1()" class="btn btn-secondary btn-sm">Clear model</button>
+            <button (click)="changeModel1()" class="btn btn-secondary btn-sm">Change model</button>
         </div>
         <hr/>
 
@@ -110,6 +111,10 @@ export class SelectMultiComponent {
         this.selectedPeople1 = [];
     }
 
+    changeModel1() {
+        this.selectedPeople1 = [{ name: 'New person' }];
+    }
+
     clearModel2() {
         this.selectedPeople2 = [];
     }

diff --git a/src/ng-select/ng-select.component.spec.ts b/src/ng-select/ng-select.component.spec.ts
@@ -308,7 +308,7 @@ describe('NgSelectComponent', function () {
             expect(fixture.componentInstance.selectedCity).toBeNull();
         }));
 
-        it('should clear previous value when setting new model', fakeAsync(() => {
+        it('should clear previous single select value when setting new model', fakeAsync(() => {
             const fixture = createTestingModule(
                 NgSelectModelChangesTestCmp,
                 `<ng-select [items]="cities"
@@ -319,7 +319,7 @@ describe('NgSelectComponent', function () {
 
             fixture.componentInstance.selectedCity = fixture.componentInstance.cities[0];
             tickAndDetectChanges(fixture);
-
+            
             const lastSelection: any = fixture.componentInstance.select.selectedItems[0];
             expect(lastSelection.selected).toBeTruthy();
 
@@ -328,6 +328,30 @@ describe('NgSelectComponent', function () {
             expect(lastSelection.selected).toBeFalsy();
         }));
 
+        it('should clear previous multiple select value when setting new model', fakeAsync(() => {
+            const fixture = createTestingModule(
+                NgSelectModelChangesTestCmp,
+                `<ng-select [items]="cities"
+                        bindLabel="name"
+                        [multiple]="true"
+                        [clearable]="true"
+                        [(ngModel)]="selectedCities">
+                </ng-select>`);
+
+            fixture.componentInstance.selectedCities = [fixture.componentInstance.cities[0]];
+            tickAndDetectChanges(fixture);
+            const select = fixture.componentInstance.select;
+            expect(select.selectedItems.length).toBe(1);
+
+            fixture.componentInstance.selectedCities = [fixture.componentInstance.cities[1]];
+            tickAndDetectChanges(fixture);
+            expect(select.selectedItems.length).toBe(1);
+
+            fixture.componentInstance.selectedCities = [];
+            tickAndDetectChanges(fixture);
+            expect(select.selectedItems.length).toBe(0);
+        }));
+
         it('should not add selected items to new items list when [items] are changed', fakeAsync(() => {
             const fixture = createTestingModule(
                 NgSelectModelChangesTestCmp,

diff --git a/src/ng-select/ng-select.component.ts b/src/ng-select/ng-select.component.ts
@@ -250,6 +250,7 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
         if (value === undefined) {
             return;
         }
+        this.itemsList.clearSelected();
         this._validateWriteValue(value);
         this._handleWriteValue(value);
         this.detectChanges();
@@ -496,7 +497,6 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
     private _handleWriteValue(ngModel: any | any[]) {
         const isEmptyArray = ngModel && Array.isArray(ngModel) && ngModel.length === 0;
         if (ngModel === null || isEmptyArray) {
-            this.itemsList.clearSelected();
             return;
         }