diff --git a/demo/app/examples/reactive-forms.component.ts b/demo/app/examples/reactive-forms.component.ts index 54ae6c2e0..165892df2 100644 --- 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 index a5f595496..8052de207 100644 --- 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 (); peopleTypeahead = new EventEmitter(); - 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 index 5b8eead16..47e7d3340 100644 --- 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, + ` + `); + + 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(); + 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 index 6b89d5f99..c76cf23b8 100644 --- a/src/ng-select/ng-select.component.ts +++ b/src/ng-select/ng-select.component.ts @@ -489,7 +489,7 @@ 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 { @@ -497,6 +497,11 @@ export class NgSelectComponent implements OnDestroy, OnChanges, AfterViewInit, C 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)); } } };