refactor(igx-autocomplete): code and test refactoring #3585

IgniteUI · Jan 30, 2019 · 1d7808d · 1d7808d
1 parent 2518ab9
commit 1d7808d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 22 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts
@@ -100,7 +100,7 @@ describe('IgxAutocomplete', () => {
             fixture.detectChanges();
             expect(dropDown.collapsed).toBeTruthy();
         }));
-        it('Should select item and close dropdown with ENTER/SPACE key', fakeAsync(() => {
+        it('Should select item and close dropdown with ENTER and do not close it with SPACE key', fakeAsync(() => {
             let startsWith = 's';
             let filteredTowns = fixture.componentInstance.filterTowns(startsWith);
             UIInteractions.sendInput(input, startsWith, fixture);
@@ -125,9 +125,9 @@ describe('IgxAutocomplete', () => {
             UIInteractions.triggerKeyDownEvtUponElem('space', input.nativeElement, true);
             tick();
             fixture.detectChanges();
-            expect(dropDown.collapsed).toBeTruthy();
-            expect(fixture.componentInstance.townSelected).toBe(filteredTowns[0]);
-            expect(input.value).toBe(filteredTowns[0]);
+            expect(dropDown.collapsed).toBeFalsy();
+            expect(fixture.componentInstance.townSelected).toBe('bu');
+            expect(input.value).toBe('bu');
         }));
         it('Should not open dropdown on input focusing', () => {
             input.nativeElement.focused = true;
@@ -225,7 +225,7 @@ describe('IgxAutocomplete', () => {
         it('Should trigger onItemSelected event on item selection', fakeAsync(() => {
             let startsWith = 'st';
             let filteredTowns = fixture.componentInstance.filterTowns(startsWith);
-            spyOn(autocomplete.onItemSelected, 'emit');
+            spyOn(autocomplete.onItemSelected, 'emit').and.callThrough();
             UIInteractions.sendInput(input, startsWith, fixture);
             tick();
             fixture.detectChanges();
@@ -249,10 +249,9 @@ describe('IgxAutocomplete', () => {
             expect(autocomplete.onItemSelected.emit).toHaveBeenCalledTimes(2);
             expect(autocomplete.onItemSelected.emit).toHaveBeenCalledWith({ value: 'Stara Zagora', cancel: false });
 
-            fixture.componentInstance.onItemSelected = function(args) { args.cancel = true; };
+            fixture.componentInstance.onItemSelected = (args) => { args.cancel = true; };
             UIInteractions.sendInput(input, 's', fixture);
             fixture.detectChanges();
-            tick();
             UIInteractions.triggerKeyDownEvtUponElem('enter', input.nativeElement, true);
             expect(fixture.componentInstance.townSelected).toBe('s');
         }));
@@ -385,7 +384,6 @@ describe('IgxAutocomplete', () => {
             expect(plainInput.nativeElement.value).toBe('Sofia');
         }));
         it('Should be instantiated properly on HTML textarea', fakeAsync(() => { }));
-        it('Should be instantiated properly on ReactiveForm', fakeAsync(() => { }));
     });
     describe('Reactive Form', () => {
         it('Reactive Form', fakeAsync(() => {
@@ -418,7 +416,7 @@ describe('IgxAutocomplete', () => {
         <igx-prefix igxRipple><igx-icon fontSet="material">home</igx-icon> </igx-prefix>
         <input igxInput name="towns" type="text" [(ngModel)]="townSelected" required
             [igxAutocomplete]='townsPanel'
-            [igxAutocomplete]='settings' />
+            [igxAutocomplete]='settings' (onItemSelected)="onItemSelected($event)"/>
         <label igxLabel for="towns">Towns</label>
         <igx-suffix igxRipple><igx-icon fontSet="material">clear</igx-icon> </igx-suffix>
     </igx-input-group>
@@ -436,7 +434,7 @@ class AutocompleteComponent {
     townSelected;
     public towns;
     settings: AutocompleteOverlaySettings = null;
-    onItemSelected;
+    onItemSelected(args) { }
 
     constructor() {
         this.towns = [

diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts
@@ -74,7 +74,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
     protected id: string;
     protected dropDownOpened$ = new Subject<boolean>();
     protected get model() {
-        return this.ngModel ? this.ngModel : this.formControl;
+        return this.ngModel || this.formControl;
     }
 
     /**
@@ -202,8 +202,6 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         }
         if (this.collapsed) {
             this.open();
-        } else {
-            this.unhighlightFirstItem();
         }
     }
 
@@ -220,7 +218,14 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
      */
     handleKeyDown(event) {
         if (!this.collapsed) {
-            super.handleKeyDown(event);
+            switch (event.key.toLowerCase()) {
+                case 'space':
+                case 'spacebar':
+                case ' ':
+                    return;
+                default:
+                    super.handleKeyDown(event);
+            }
         }
     }
 
@@ -267,15 +272,11 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         this.close();
     }
 
-    private unhighlightFirstItem() {
-        this.dropDown.focusedItem = null;
-        const firstItem = this.dropDown.items[0];
-        if (firstItem) {
-            firstItem.isFocused = false;
-        }
-    }
-
     private highlightFirstItem() {
+        const focusedItem = this.dropDown.focusedItem;
+        if (focusedItem) {
+            focusedItem.focused = false;
+        }
         const firstItem = this.dropDown.items[0];
         if (firstItem) {
             firstItem.isFocused = true;