chore(dropdown): Adding "Home" key functionality/"Up" key skipping he…

…aders #984
IgniteUI · Apr 24, 2018 · 914123b · 914123b
1 parent 203e31b
commit 914123b
Showing 1 changed file with 24 additions and 2 deletions.
diff --git a/src/drop-down/dropDown.component.ts b/src/drop-down/dropDown.component.ts
@@ -109,7 +109,8 @@ export class IgxDropDownComponent implements OnInit, AfterViewInit {
     public onArrowUpKeyDown(event) {
         if (this._focusedItem) {
             let focusedItemIndex = this._focusedItem.index;
-            while ((this.items.toArray()[focusedItemIndex - 1]) && (this.items.toArray()[focusedItemIndex - 1]).isDisabled) {
+            while ((this.items.toArray()[focusedItemIndex - 1]) &&
+                 (this.items.toArray()[focusedItemIndex - 1].isDisabled || this.items.toArray()[focusedItemIndex - 1].isHeader)) {
                 focusedItemIndex--;
             }
             if (focusedItemIndex > 0) {
@@ -129,7 +130,7 @@ export class IgxDropDownComponent implements OnInit, AfterViewInit {
     @HostListener("keydown.End", ["$event"])
     public onEndKeyDown(event) {
         let focusedItemIndex = (this.items.length - 1);
-        while ((this.items.toArray()[focusedItemIndex]) && ((this.items.toArray()[focusedItemIndex]).isDisabled 
+        while ((this.items.toArray()[focusedItemIndex]) && ((this.items.toArray()[focusedItemIndex]).isDisabled
             || (this.items.toArray()[focusedItemIndex]).isHeader)) {
                 focusedItemIndex--;
             }
@@ -147,6 +148,27 @@ export class IgxDropDownComponent implements OnInit, AfterViewInit {
             }
     }
 
+    @HostListener("keydown.Home", ["$event"])
+    public onHomeKeyDown(event) {
+        let focusedItemIndex = 0;
+        while ((this.items.toArray()[focusedItemIndex]) && ((this.items.toArray()[focusedItemIndex]).isDisabled
+            || (this.items.toArray()[focusedItemIndex]).isHeader)) {
+                focusedItemIndex++;
+            }
+        if (focusedItemIndex < this.items.length - 1) {
+                if (this._focusedItem) {
+                    this._focusedItem.isFocused = false;
+                }
+                this._focusedItem = this.items.toArray()[focusedItemIndex];
+                this._focusedItem.isFocused = true;
+            }
+        const rect = this._focusedItem.element.nativeElement.getBoundingClientRect();
+        const parentRect = this.toggle.element.getBoundingClientRect();
+        if (parentRect.top > rect.top) {
+                this.toggle.element.scrollTop -= (parentRect.top - rect.bottom + rect.height);
+            }
+    }
+
     ngOnInit() {
         this.toggleAction.target = this.toggle;
         this.toggleAction.closeOnOutsideClick = true;