fix: The enter key works wrong when used immediately after filtering #60

optimistex · Apr 14, 2018 · f219709 · f219709
1 parent 5315d56
commit f219709
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/app/lib/ngx-select/ngx-select.component.spec.ts b/src/app/lib/ngx-select/ngx-select.component.spec.ts
@@ -678,6 +678,7 @@ describe('NgxSelectComponent', () => {
             formControlInput(1).dispatchEvent(createKeyboardEvent('input', 'keyR'));
             fixture.detectChanges();
             expect(selectItemList(1).length).toBe(3);
+            expect(selectItemList(1)[0]).toEqual(selectItemActive(1));
         });
 
         it('with lazy load items', () => {

diff --git a/src/app/lib/ngx-select/ngx-select.component.ts b/src/app/lib/ngx-select/ngx-select.component.ts
@@ -37,7 +37,7 @@ export interface INgxSelectComponentMouseEvent extends MouseEvent {
 
 enum ENavigation {
     first, previous, next, last,
-    firstSelected
+    firstSelected, firstIfOptionActiveInvisible
 }
 
 function propertyExists(obj: Object, propertyName: string) {
@@ -182,11 +182,12 @@ export class NgxSelectComponent implements INgxSelectOptions, ControlValueAccess
             .combineLatest(this.subjOptionsSelected, this.subjSearchText,
                 (options: TSelectOption[], selectedOptions: NgxSelectOption[], search: string) => {
                     this.optionsFiltered = this.filterOptions(search, options, selectedOptions);
+                    this.cacheOptionsFilteredFlat = null;
+                    this.navigateOption(ENavigation.firstIfOptionActiveInvisible);
                     return selectedOptions;
                 }
             )
             .flatMap((selectedOptions: NgxSelectOption[]) => {
-                this.cacheOptionsFilteredFlat = null;
                 return this.optionsFilteredFlat().filter((flatOptions: NgxSelectOption[]) =>
                     this.autoSelectSingleOption && flatOptions.length === 1 && !selectedOptions.length
                 );
@@ -273,6 +274,10 @@ export class NgxSelectComponent implements INgxSelectOptions, ControlValueAccess
                             navigated.index = options.indexOf(this.subjOptionsSelected.value[0]);
                         }
                         break;
+                    case ENavigation.firstIfOptionActiveInvisible:
+                        const idxOfOptionActive = options.indexOf(this.optionActive);
+                        navigated.index = idxOfOptionActive > 0 ? idxOfOptionActive : 0;
+                        break;
                 }
                 navigated.activeOption = options[navigated.index];
                 return navigated;
@@ -427,7 +432,8 @@ export class NgxSelectComponent implements INgxSelectOptions, ControlValueAccess
     }
 
     protected optionActivate(navigated: INgxOptionNavigated): void {
-        if (!navigated.activeOption || !navigated.activeOption.disabled) {
+        if ((this.optionActive !== navigated.activeOption) &&
+            (!navigated.activeOption || !navigated.activeOption.disabled)) {
             this.optionActive = navigated.activeOption;
             this.navigated.emit(navigated);
         }