IE 11 drop down key up and down events issue #1535

src/modules/dropdown/dropdown-menu.component.ts

@@ -161,12 +161,12 @@ export class SkyDropdownMenuComponent implements AfterContentInit, OnDestroy {
   public onKeyDown(event: KeyboardEvent) {
     const key = event.key.toLowerCase();
 
-    if (key === 'arrowdown') {
+    if (key === 'arrowdown' || key === 'down') {
       this.focusNextItem();
       event.preventDefault();
     }
 
-    if (key === 'arrowup') {
+    if (key === 'arrowup' || key === 'up') {
       this.focusPreviousItem();
       event.preventDefault();
     }

src/modules/dropdown/dropdown.component.spec.ts

@@ -123,6 +123,71 @@ describe('Dropdown component', () => {
     return (getComputedStyle(elem).visibility !== 'hidden');
   }
 
+  function verifyArrowKeyNavigation(downKey: string, upKey: string) {
+    openPopoverWithButtonClick();
+
+    const hostElem = getDropdownMenuHostElement();
+
+    SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
+      keyboardEventInit: { key: downKey }
+    });
+    tick();
+    fixture.detectChanges();
+    tick();
+
+    verifyActiveMenuItemByIndex(0);
+    verifyFocusedMenuItemByIndex(0);
+
+    SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
+      keyboardEventInit: { key: downKey }
+    });
+    tick();
+    fixture.detectChanges();
+    tick();
+
+    // The second item is disabled, so it should be skipped!
+    verifyActiveMenuItemByIndex(2);
+    verifyFocusedMenuItemByIndex(2);
+
+    SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
+      keyboardEventInit: { key: upKey }
+    });
+    tick();
+    fixture.detectChanges();
+    tick();
+
+    // The second item is disabled, so it should be skipped!
+    verifyActiveMenuItemByIndex(0);
+    verifyFocusedMenuItemByIndex(0);
+
+    // Navigation should loop from the last item to the first:
+    SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
+      keyboardEventInit: { key: downKey }
+    });
+    SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
+      keyboardEventInit: { key: downKey }
+    });
+    SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
+      keyboardEventInit: { key: downKey }
+    });
+    tick();
+    fixture.detectChanges();
+    tick();
+
+    verifyActiveMenuItemByIndex(0);
+    verifyFocusedMenuItemByIndex(0);
+
+    SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
+      keyboardEventInit: { key: upKey }
+    });
+    tick();
+    fixture.detectChanges();
+    tick();
+
+    verifyActiveMenuItemByIndex(3);
+    verifyFocusedMenuItemByIndex(3);
+  }
+
   describe('basic setup', () => {
     it('should have a default button type of "select"', () => {
       fixture.detectChanges();
@@ -273,69 +338,30 @@ describe('Dropdown component', () => {
       verifyMenuVisibility();
     }));
 
-    it('should navigate menu items with arrow keys', fakeAsync(() => {
-      openPopoverWithButtonClick();
-
-      const hostElem = getDropdownMenuHostElement();
-
-      SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
-        keyboardEventInit: { key: 'ArrowDown' }
-      });
+    it('should open menu if down is pressed', fakeAsync(() => {
       tick();
       fixture.detectChanges();
-      tick();
-
-      verifyActiveMenuItemByIndex(0);
-      verifyFocusedMenuItemByIndex(0);
 
-      SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
-        keyboardEventInit: { key: 'ArrowDown' }
-      });
-      tick();
-      fixture.detectChanges();
-      tick();
+      const hostElem = getDropdownHostElement();
 
-      // The second item is disabled, so it should be skipped!
-      verifyActiveMenuItemByIndex(2);
-      verifyFocusedMenuItemByIndex(2);
+      verifyMenuVisibility(false);
 
       SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
-        keyboardEventInit: { key: 'ArrowUp' }
+        keyboardEventInit: { key: 'Down' }
       });
       tick();
       fixture.detectChanges();
       tick();
 
-      // The second item is disabled, so it should be skipped!
-      verifyActiveMenuItemByIndex(0);
-      verifyFocusedMenuItemByIndex(0);
-
-      // Navigation should loop from the last item to the first:
-      SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
-        keyboardEventInit: { key: 'ArrowDown' }
-      });
-      SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
-        keyboardEventInit: { key: 'ArrowDown' }
-      });
-      SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
-        keyboardEventInit: { key: 'ArrowDown' }
-      });
-      tick();
-      fixture.detectChanges();
-      tick();
-
-      verifyActiveMenuItemByIndex(0);
-      verifyFocusedMenuItemByIndex(0);
+      verifyMenuVisibility();
+    }));
 
-      SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', {
-        keyboardEventInit: { key: 'ArrowUp' }
-      });
-      tick();
-      fixture.detectChanges();
-      tick();
+    it('should navigate menu items with arrow keys', fakeAsync(() => {
+      verifyArrowKeyNavigation('ArrowDown', 'ArrowUp');
+    }));
 
-      verifyActiveMenuItemByIndex(3);
-      verifyFocusedMenuItemByIndex(3);
+    it('should navigate menu items with internet explorer arrow keys', fakeAsync(() => {
+      verifyArrowKeyNavigation('Down', 'Up');
     }));
 
     it('should focus the first item if opened with enter key', fakeAsync(() => {

src/modules/dropdown/dropdown.component.ts

@@ -135,6 +135,7 @@ export class SkyDropdownComponent implements OnInit, OnDestroy {
 
         // Allow the menu to be opened with the arrowdown key
         // if it is first opened with the mouse.
+        case 'down':
         case 'arrowdown':
         if (!this.isKeyboardActive) {
           this.isKeyboardActive = true;
@@ -153,6 +154,7 @@ export class SkyDropdownComponent implements OnInit, OnDestroy {
       this.isKeyboardActive = true;
       break;
 
+      case 'down':
       case 'arrowdown':
       this.isKeyboardActive = true;
       this.sendMessage(SkyDropdownMessageType.Open);