Fix - Combo, Drop Down - Fix TAB key navigation - 6.2.x (#3206)

* fix(igxCombo): fix combo and drop down navigation with TAB key, #3200 * fix(combo): focusing combo input highlights the first nav item in DD, #3200
IgniteUI · Dec 3, 2018 · d47bf79 · d47bf79
1 parent 5eb957f
commit d47bf79
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
@@ -881,6 +881,22 @@ describe('igxCombo', () => {
                 });
             });
         });
+
+        it('Should properly get the first focusable item when focusing the component list', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxComboInputTestComponent);
+            fixture.detectChanges();
+            const combo = fixture.componentInstance.combo;
+            spyOn(combo.dropdown, 'getFirstSelectableItem').and.callThrough();
+            combo.toggle();
+            tick();
+            fixture.detectChanges();
+            combo.searchInput.nativeElement.dispatchEvent(new KeyboardEvent('keypress', { key: 'Tab'}));
+            (<HTMLElement>document.getElementsByClassName('igx-combo__content')[0]).dispatchEvent(new Event('focus'));
+            tick();
+            fixture.detectChanges();
+            expect(combo.dropdown.getFirstSelectableItem).toHaveBeenCalledTimes(1);
+            expect((<HTMLElement>combo.dropdown.focusedItem.element.nativeElement).textContent.trim()).toEqual('Michigan');
+        }));
     });
 
 

diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts
@@ -552,6 +552,12 @@ export abstract class IgxDropDownBase implements OnInit, IToggleView {
             this._focusedItem.isFocused = true;
         }
     }
+    /**
+     * @hidden
+     */
+    public getFirstSelectableItem() {
+        return this.children.find(child => !child.isHeader && !child.disabled);
+    }
 }
 
 /**

diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts
@@ -43,6 +43,13 @@ export class IgxDropDownItemNavigationDirective {
     set target(target: IgxDropDownBase) {
         this._target = target ? target : this.dropdown;
     }
+    @HostListener('focus')
+    handleFocus() {
+        if ((<any>this.target).combo) {
+            this.target.focusedItem = this.target.getFirstSelectableItem();
+            this.target.focusedItem.isFocused = true;
+        }
+    }
 
     /**
      * @hidden
@@ -52,7 +59,7 @@ export class IgxDropDownItemNavigationDirective {
         if (event) {
             const key = event.key.toLowerCase();
             if (!this.target.collapsed) { // If dropdown is opened
-                const navKeys = ['esc', 'escape', 'enter', 'tab', 'space', 'spacebar', ' ',
+                const navKeys = ['esc', 'escape', 'enter', 'space', 'spacebar', ' ',
             'arrowup', 'up', 'arrowdown', 'down', 'home', 'end'];
                 if (navKeys.indexOf(key) === -1) { // If key has appropriate function in DD
                     return;
@@ -65,10 +72,10 @@ export class IgxDropDownItemNavigationDirective {
             switch (key) {
                 case 'esc':
                 case 'escape':
+                // case 'tab':
                     this.onEscapeKeyDown(event);
                     break;
                 case 'enter':
-                case 'tab':
                     this.onEnterKeyDown(event);
                     break;
                 case 'space':