fix(igx-combo): rebind onArrowUp to searchInput,for overlay integrati…

…on, #1260
IgniteUI · Jun 22, 2018 · 676ac89 · 676ac89
1 parent 514e75e
commit 676ac89
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html
@@ -32,7 +32,7 @@
     <igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [width]="width">
         <igx-input-group class="igx-combo__search">
             <input class="igx-combo-input" igxInput #searchInput name="searchInput" type="text" [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)"
-                (keyup)="handleKeyUp($event)" (focus)="dropdown.onBlur($event)" [placeholder]="searchPlaceholder" aria-autocomplete="both"
+                (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [placeholder]="searchPlaceholder" aria-autocomplete="both"
                 [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
         </igx-input-group>
         <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: this}">

diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts
@@ -549,8 +549,8 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
     /**
      * @hidden
      */
-    @HostListener('keydown.ArrowUp', ['$event'])
-    @HostListener('keydown.Alt.ArrowUp', ['$event'])
+    // @HostListener('keydown.ArrowUp', ['$event'])
+    // @HostListener('keydown.Alt.ArrowUp', ['$event'])
     onArrowUp(evt) {
         evt.preventDefault();
         evt.stopPropagation();
@@ -701,6 +701,15 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
         }
     }
 
+    /**
+     * @hidden
+     */
+    public handleKeyDown(evt) {
+        if (evt.key === 'ArrowUp' || evt.key === 'Up') {
+            this.onArrowUp(evt);
+        }
+    }
+
     private checkMatch() {
         this.customValueFlag = this.displayKey || this.displayKey === 0 ?
             !this.filteredData