support bindValue with typeahead

ng-select · Mar 1, 2018 · a4768fb · a4768fb
1 parent 54f55a0
commit a4768fb
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 7 deletions.
diff --git a/demo/app/examples/reactive-forms.component.ts b/demo/app/examples/reactive-forms.component.ts
@@ -4,6 +4,7 @@ import { NgOption } from '@ng-select/ng-select';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { DataService } from '../shared/data.service';
 import { NgSelectComponent } from '../../../src/ng-select/ng-select.component';
+import { delay } from 'rxjs/operators';
 
 @Component({
     selector: 'reactive-forms',
@@ -256,7 +257,7 @@ export class ReactiveFormsComponent {
     }
 
     private loadAlbums() {
-        this.dataService.getAlbums().subscribe(albums => {
+        this.dataService.getAlbums().pipe(delay(500)).subscribe(albums => {
             this.allAlbums = albums;
             this.albums = [...this.allAlbums];
             this.selectFirstAlbum();

diff --git a/demo/app/examples/search.component.ts b/demo/app/examples/search.component.ts
@@ -44,6 +44,7 @@ import { DataService } from '../shared/data.service';
         ---html,true
         <ng-select [items]="serverSideFilterItems"
                    bindLabel="name"
+                   bindValue="name"
                    [addTag]="true"
                    [multiple]="true"
                    [typeahead]="peopleTypeahead"
@@ -64,9 +65,7 @@ export class SelectSearchComponent {
 
     searchTerm = new EventEmitter<string>();
     peopleTypeahead = new EventEmitter<string>();
-    selectedPersons = [{
-        name: 'Karyn Wright'
-    }];
+    selectedPersons = ['Karyn Wright', 'Other'];
     selectedPerson: any;
     selectedCustom: any;
 

diff --git a/src/ng-select/ng-select.component.spec.ts b/src/ng-select/ng-select.component.spec.ts
@@ -446,6 +446,34 @@ describe('NgSelectComponent', function () {
                 tickAndDetectChanges(fixture);
                 expect(fixture.componentInstance.select.selectedItems).toEqual([]);
             }));
+
+            it('should select by bindValue when items are not loaded and typeahead is used', fakeAsync(() => {
+                const fixture = createTestingModule(
+                    NgSelectSelectedTypeaheadWithBindValueMultipleCmp,
+                    `<ng-select [items]="cities"
+                        bindLabel="name"
+                        bindValue="id"
+                        [multiple]="true"
+                        [typeahead]="filter"
+                        placeholder="select value"
+                        [(ngModel)]="selectedCities">
+                    </ng-select>`);
+
+                fixture.componentInstance.selectedCities = [1, 2];
+                tickAndDetectChanges(fixture);
+                expect(fixture.componentInstance.select.selectedItems).toEqual([
+                    jasmine.objectContaining({ label: 1, value: { id: 1, name: 1 } }),
+                    jasmine.objectContaining({ label: 2, value: { id: 2, name: 2 } })
+                ]);
+
+                fixture.componentInstance.cities = [
+                    { id: 1, name: 'Vilnius' },
+                    { id: 2, name: 'Kaunas' },
+                    { id: 3, name: 'Pabrade' },
+                ];
+                tickAndDetectChanges(fixture);
+                expect(fixture.componentInstance.selectedCities).toEqual([1, 2]);
+            }));
         });
 
         describe('multiple', () => {
@@ -879,7 +907,7 @@ describe('NgSelectComponent', function () {
 
             fixture.componentInstance.dropdownPosition = 'top';
             tickAndDetectChanges(fixture);
-            
+
             fixture.componentInstance.select.open();
             tickAndDetectChanges(fixture);
 
@@ -1784,6 +1812,20 @@ class NgSelectSelectedSimpleMultipleCmp {
     ];
 }
 
+@Component({
+    template: ``
+})
+class NgSelectSelectedTypeaheadWithBindValueMultipleCmp {
+    @ViewChild(NgSelectComponent) select: NgSelectComponent;
+    selectedCities = [];
+    filter = new Subject<string>();
+    cities = [];
+
+    ngOnInit() {
+        this.filter.subscribe();
+    }
+}
+
 @Component({
     template: ``
 })
@@ -1915,5 +1957,5 @@ class NgSelectEventsTestCmp {
 
     onClear() { }
 
-    onScrollToEnd() {}
+    onScrollToEnd() { }
 }
diff --git a/src/ng-select/ng-select.component.ts b/src/ng-select/ng-select.component.ts
@@ -489,14 +489,19 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C
         }
 
         const select = (val: any) => {
-            const item = this.itemsList.findItem(val);
+            let item = this.itemsList.findItem(val);
             if (item) {
                 this.itemsList.select(item);
             } else {
                 const isObject = val instanceof Object;
                 const simpleValue = !isObject && !this.bindValue;
                 if (isObject || simpleValue) {
                     this.itemsList.select(this.itemsList.mapItem(val, simpleValue, null));
+                } else if (!isObject && this.bindValue && this._isTypeahead) {
+                    item = {};
+                    item[this.bindValue] = val;
+                    item[this.bindLabel] = val;
+                    this.itemsList.select(this.itemsList.mapItem(item, false, null));
                 }
             }
         };