fix: mark first item when selected is not among options (#281)

fixes #278
ng-select · Feb 21, 2018 · 8a23b71 · 8a23b71
1 parent 7c912ae
commit 8a23b71
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 13 deletions.
diff --git a/src/ng-select/items-list.ts b/src/ng-select/items-list.ts
@@ -9,7 +9,7 @@ export class ItemsList {
     private _markedIndex = -1;
     private _selected: NgOption[] = [];
 
-    constructor(private _ngSelect: NgSelectComponent) {}
+    constructor(private _ngSelect: NgSelectComponent) { }
 
     get items(): NgOption[] {
         return this._items;
@@ -123,8 +123,9 @@ export class ItemsList {
             return;
         }
 
-        if (this._lastSelectedItem) {
-            this._markedIndex = this._filteredItems.indexOf(this._lastSelectedItem);
+        const indexOfLastSelected =  this._filteredItems.indexOf(this._lastSelectedItem);
+        if (this._lastSelectedItem && indexOfLastSelected > -1) {
+            this._markedIndex = indexOfLastSelected;
         } else {
             this._markedIndex = markDefault ? 0 : -1;
         }
@@ -184,8 +185,8 @@ export class ItemsList {
     private _getDefaultFilterFunc(term: string) {
         return (option: NgOption) => {
             return searchHelper.stripSpecialChars(option.label ? option.label.toString() : '')
-                .toUpperCase()
-                .indexOf(searchHelper.stripSpecialChars(term).toUpperCase()) > -1;
+                .toLowerCase()
+                .indexOf(searchHelper.stripSpecialChars(term).toLowerCase()) > -1;
         };
     }
 

diff --git a/src/ng-select/ng-option-highlight.directive.ts b/src/ng-select/ng-option-highlight.directive.ts
@@ -24,8 +24,8 @@ export class NgOptionHighlightDirective implements OnChanges {
         }
         let indexOfTerm: number;
         indexOfTerm = searchHelper.stripSpecialChars(label)
-            .toUpperCase()
-            .indexOf(searchHelper.stripSpecialChars(this.term).toUpperCase());
+            .toLowerCase()
+            .indexOf(searchHelper.stripSpecialChars(this.term).toLowerCase());
         if (indexOfTerm > -1) {
             this._setInnerHtml(
                 label.substring(0, indexOfTerm)

diff --git a/src/ng-select/ng-select.component.spec.ts b/src/ng-select/ng-select.component.spec.ts
@@ -1065,9 +1065,8 @@ describe('NgSelectComponent', function () {
                     [(ngModel)]="selectedCity">
                 </ng-select>`);
 
-            tick(200);
             fixture.componentInstance.select.onFilter('vilnius');
-            tick(200);
+            tick();
 
             const result = [jasmine.objectContaining({
                 value: { id: 1, name: 'Vilnius' }
@@ -1118,9 +1117,29 @@ describe('NgSelectComponent', function () {
                     [(ngModel)]="selectedCity">
                 </ng-select>`);
 
-            tick(200);
             fixture.componentInstance.select.onFilter('pab');
-            tick(200);
+            tick();
+
+            const result = jasmine.objectContaining({
+                value: fixture.componentInstance.cities[2]
+            });
+            expect(fixture.componentInstance.select.itemsList.markedItem).toEqual(result)
+            triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Enter);
+            expect(fixture.componentInstance.select.selectedItems).toEqual([result]);
+        }));
+
+        it('should mark first item on filter when selected is not among filtered items', fakeAsync(() => {
+            fixture = createTestingModule(
+                NgSelectFilterTestCmp,
+                `<ng-select [items]="cities"
+                    bindLabel="name"
+                    [(ngModel)]="selectedCity">
+                </ng-select>`);
+
+            fixture.componentInstance.selectedCity = fixture.componentInstance.cities[0];
+            fixture.detectChanges();
+            fixture.componentInstance.select.onFilter('pab');
+            tick();
 
             const result = jasmine.objectContaining({
                 value: fixture.componentInstance.cities[2]
@@ -1139,9 +1158,8 @@ describe('NgSelectComponent', function () {
                     [(ngModel)]="selectedCity">
                 </ng-select>`);
 
-            tick(200);
             fixture.componentInstance.select.onFilter('pab');
-            tick(200);
+            tick();
             expect(fixture.componentInstance.select.itemsList.markedItem).toEqual(undefined)
         }));