fix(navigation): close dropdown without selection on tab fixes #65 #67

ng-select · Oct 4, 2017 · 5e0ca53 · 5e0ca53
1 parent 391febe
commit 5e0ca53
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 23 deletions.
diff --git a/src/lib/src/ng-select.component.html b/src/lib/src/ng-select.component.html
@@ -49,7 +49,7 @@
 
 <div class="as-menu-outer">
     <virtual-scroll role="listbox" class="as-menu" [bufferAmount]="4" [items]="itemsList.filteredItems" (update)="viewPortItems = $event">
-        <div class="as-option" role="option" (click)="toggle(item)" (mouseover)="onItemHover(item)"
+        <div class="as-option" role="option" (click)="toggle(item)" (mousedown)="$event.preventDefault()" (mouseover)="onItemHover(item)"
              *ngFor="let item of viewPortItems"
              [class.disabled]="item.disabled"
              [class.selected]="item.selected"

diff --git a/src/lib/src/ng-select.component.spec.ts b/src/lib/src/ng-select.component.spec.ts
@@ -352,13 +352,6 @@ describe('NgSelectComponent', function () {
         });
 
         describe('tab', () => {
-            it('should close dropdown and select marked value', () => {
-                triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
-                triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Tab);
-                expect(fixture.componentInstance.select.value).toEqual(jasmine.objectContaining(fixture.componentInstance.cities[0]));
-                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);
@@ -367,21 +360,22 @@ describe('NgSelectComponent', function () {
                 expect(fixture.componentInstance.select.isOpen).toBeFalsy()
             }));
 
-            it('should close dropdown when marked item is already selected', () => {
-                fixture.componentInstance.selectedCity = fixture.componentInstance.cities[0];
+            it('should close dropdown', () => {
                 triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
                 triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Tab);
-                expect(fixture.componentInstance.select.value).toEqual(jasmine.objectContaining(fixture.componentInstance.cities[0]));
+                expect(fixture.componentInstance.select.value).toBeNull();
                 expect(fixture.componentInstance.select.isOpen).toBeFalsy()
             });
 
-            it('should close dropdown and select marked when multiple', () => {
-                fixture.componentInstance.select.multiple = true;
+            it('should close dropdown and keep selected value', fakeAsync(() => {
+                fixture.componentInstance.selectedCity = fixture.componentInstance.cities[0];
+                tickAndDetectChanges(fixture);
                 triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
                 triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Tab);
+                tickAndDetectChanges(fixture);
                 expect(fixture.componentInstance.select.value).toEqual(jasmine.objectContaining(fixture.componentInstance.cities[0]));
                 expect(fixture.componentInstance.select.isOpen).toBeFalsy()
-            });
+            }));
         });
 
         describe('backspace', () => {

diff --git a/src/lib/src/ng-select.component.ts b/src/lib/src/ng-select.component.ts
@@ -113,7 +113,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, ControlV
     }
 
     set items(items: NgOption[]) {
-        this.setItems(items);
+        this.setItems(items || []);
         this._items$.next(true);
     }
 
@@ -440,14 +440,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, ControlV
 
     private handleTab($event: KeyboardEvent) {
         if (this.isOpen) {
-            const marked = this.itemsList.markedItem;
-            if (marked) {
-                this.select(marked);
-            }
-
-            if (this.multiple || !marked) {
-                this.close();
-            }
+            this.close();
         }
     }