fix(navigation): close dropdown on tab click fixes #58

package.json

@@ -41,9 +41,9 @@
     "gh-pages": "npm run build-demo && git checkout gh-pages"
   },
   "peerDependencies": {
+    "@angular/common": ">=2.4.10 <5.0.0",
     "@angular/core": ">=2.4.10 <5.0.0",
-    "@angular/forms": ">=2.4.10 <5.0.0",
-    "@angular/common": ">=2.4.10 <5.0.0"
+    "@angular/forms": ">=2.4.10 <5.0.0"
   },
   "devDependencies": {
     "@angular/common": "^4.3.5",
@@ -56,6 +56,7 @@
     "@angular/router": "^4.3.5",
     "@angularclass/hmr": "^1.0.1",
     "@angularclass/hmr-loader": "^3.0.4",
+    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
     "@types/jasmine": "^2.5.36",
     "@types/node": "^6.0.87",
     "@types/selenium-webdriver": "2.53.39",
@@ -108,7 +109,6 @@
     "shelljs": "^0.7.0",
     "standard-version": "^4.2.0",
     "style-loader": "^0.13.0",
-    "systemjs": "^0.19.40",
     "ts-helpers": "^1.1.1",
     "tslint": "^5.6.0",
     "tslint-loader": "^3.5.3",

src/demo/app/app.module.ts

@@ -5,15 +5,16 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule, Routes } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AppComponent } from './app.component';
-import { SelectWithTemplatesComponent } from './select-with-templates.component';
-import { SelectBindingsComponent } from './select-bindings.component';
-import { SelectSearchComponent } from './select-search.component';
-import { ReactiveFormsComponent } from './reactive-forms.component';
-import { SelectEventsComponent } from './select-events.component';
-import { SelectMultiComponent } from './select-multi.component';
-import { SelectAutocompleteComponent } from './select-autocomplete.component';
+import { SelectWithTemplatesComponent } from './examples/custom-templates.component';
+import { SelectBindingsComponent } from './examples/bindings.component';
+import { SelectSearchComponent } from './examples/search.component';
+import { ReactiveFormsComponent } from './examples/reactive-forms.component';
+import { SelectEventsComponent } from './examples/events.component';
+import { SelectMultiComponent } from './examples/multi.component';
+import { SelectAutocompleteComponent } from './examples/autocomplete.component';
 
 const appRoutes: Routes = [
     {
@@ -33,11 +34,12 @@ const appRoutes: Routes = [
 @NgModule({
     imports: [
         BrowserModule,
-        NgSelectModule.forRoot({notFoundText: 'No items found', typeToSearchText: 'Type to search'}),
+        NgSelectModule.forRoot({ notFoundText: 'No items found', typeToSearchText: 'Type to search' }),
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
         HttpClientModule,
+        NgbModule.forRoot(),
         RouterModule.forRoot(
             appRoutes,
             {

src/demo/app/reactive-forms.component.ts → src/demo/app/examples/reactive-forms.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {NgOption} from '@ng-select/ng-select';
 import {HttpClient} from '@angular/common/http';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
     selector: 'reactive-forms',
@@ -48,6 +49,7 @@ import {HttpClient} from '@angular/common/http';
                 <small class="form-text text-muted">Albums data from backend using HttpClient.</small>
             </div>
             <hr>
+            
             <div class="form-group">
                 <label for="album">Favorite photo</label>
                 <ng-select [items]="photos"
@@ -67,7 +69,41 @@ import {HttpClient} from '@angular/common/http';
                 <small class="form-text text-muted">5000 items with virtual scroll</small>
                 <br>
                 <button class="btn btn-secondary btn-sm" (click)="selectFirstPhoto()">Select first photo</button>
+                <button class="btn btn-secondary btn-sm" (click)="openModel(content)">Open in model</button>
             </div>
+            
+            <ng-template #content let-c="close" let-d="dismiss">
+                <div class="modal-header">
+                    <h4 class="modal-title">Select in modal</h4>
+                    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label for="album">Favorite photo</label>
+                        <ng-select [items]="photos"
+                                   (change)="changePhoto($event)"
+                                   bindLabel="title"
+                                   bindValue="thumbnailUrl"
+                                   placeholder="Select photo"
+                                   formControlName="photo">
+                            <ng-template ng-label-tmp let-item="item">
+                                <img height="15" width="15" [src]="item.thumbnailUrl"/>
+                                <span>{{item.title}}</span>
+                            </ng-template>
+                            <ng-template ng-option-tmp let-item="item" let-index="index">
+                                <img height="15" width="15" [src]="item.thumbnailUrl"/>
+                                <span>{{item.title}}</span>
+                            </ng-template>
+                        </ng-select>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
+                </div>
+            </ng-template>
+
         </form>
 
         <p>Form value: {{ heroForm.value | json }}</p>
@@ -94,7 +130,7 @@ export class ReactiveFormsComponent {
     albums = [];
     photos = [];
 
-    constructor(private fb: FormBuilder, private http: HttpClient) {
+    constructor(private fb: FormBuilder, private http: HttpClient, private modalService: NgbModal) {
     }
 
     ngOnInit() {
@@ -130,16 +166,29 @@ export class ReactiveFormsComponent {
         this.heroForm.get('photo').patchValue(this.photos[0].thumbnailUrl);
     }
 
+    selectFirstAlbum() {
+        this.heroForm.get('album').patchValue(this.albums[0].id);
+    }
+
+    openModel(content) {
+        this.modalService.open(content);
+    }
+
+    changePhoto(photo) {
+        this.heroForm.get('photo').patchValue(photo ? photo.thumbnailUrl : null);
+    }
+
     private loadAlbums() {
         this.http.get<any[]>('https://jsonplaceholder.typicode.com/albums').subscribe(rsp => {
             this.albums = rsp;
+            this.selectFirstAlbum();
         });
     }
 
     private loadPhotos() {
         this.http.get<any[]>('https://jsonplaceholder.typicode.com/photos').subscribe(rsp => {
              this.photos = rsp;
-            console.log('loaded photos:', this.photos.length);
+             this.selectFirstPhoto();
         });
     }
 }

src/demo/vendor.ts

@@ -2,5 +2,6 @@ import '@angular/platform-browser';
 import '@angular/platform-browser-dynamic';
 import '@angular/core';
 import '@angular/common';
+import '@ng-bootstrap/ng-bootstrap';
 
 import 'rxjs';

src/lib/src/ng-select.component.spec.ts

@@ -340,6 +340,14 @@ describe('NgSelectComponent', function () {
                 expect(fixture.componentInstance.select.isOpen).toBeFalsy()
             });
 
+            it('should close dropdown when there are no items', fakeAsync(() => {
+                fixture.componentInstance.select.onFilter({ target: { value: 'random stuff' } });
+                tick(200);
+                triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
+                triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Tab);
+                expect(fixture.componentInstance.select.isOpen).toBeFalsy()
+            }));
+
             it('should close dropdown when marked item is already selected', () => {
                 fixture.componentInstance.selectedCity = fixture.componentInstance.cities[0];
                 triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);

src/lib/src/ng-select.component.ts

@@ -395,8 +395,12 @@ export class NgSelectComponent implements OnInit, OnDestroy, ControlValueAccesso
 
     private handleTab($event: KeyboardEvent) {
         if (this.isOpen) {
-            this.select(this.itemsList.markedItem);
-            if (this.multiple) {
+            const marked = this.itemsList.markedItem;
+            if (marked) {
+                this.select(marked);
+            }
+
+            if (this.multiple || !marked) {
                 this.close();
             }
         }

yarn.lock

@@ -68,6 +68,10 @@
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@angularclass/hmr/-/hmr-1.2.2.tgz#46a18f89a1e94d05c268b83c9480e005f73fc265"
 
+"@ng-bootstrap/ng-bootstrap@^1.0.0-beta.5":
+  version "1.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0-beta.5.tgz#da2b9066b3701a284cac5a16168a77def947b4ab"
+
 "@types/fs-extra@0.0.33":
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-0.0.33.tgz#a8719c417b080c012d3497b28e228ac09745fdf2"
@@ -6166,12 +6170,6 @@ symbol-observable@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d"
 
-systemjs@^0.19.40:
-  version "0.19.47"
-  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-0.19.47.tgz#c8c93937180f3f5481c769cd2720763fb4a31c6f"
-  dependencies:
-    when "^3.7.5"
-
 tapable@^0.2.5, tapable@^0.2.7, tapable@~0.2.5:
   version "0.2.8"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"
@@ -6747,10 +6745,6 @@ weinre@^2.0.0-pre-I0Z7U9OV:
     nopt "3.0.x"
     underscore "1.7.x"
 
-when@^3.7.5:
-  version "3.7.8"
-  resolved "https://registry.yarnpkg.com/when/-/when-3.7.8.tgz#c7130b6a7ea04693e842cdc9e7a1f2aa39a39f82"
-
 whet.extend@~0.9.9:
   version "0.9.9"
   resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"