diff --git a/src/modules/dropdown/dropdown-menu.component.ts b/src/modules/dropdown/dropdown-menu.component.ts index 4bbb16984..1728ea450 100644 --- a/src/modules/dropdown/dropdown-menu.component.ts +++ b/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' || key === 'down') { + if (key === 'arrowdown') { this.focusNextItem(); event.preventDefault(); } - if (key === 'arrowup' || key === 'up') { + if (key === 'arrowup') { this.focusPreviousItem(); event.preventDefault(); } diff --git a/src/modules/dropdown/dropdown.component.spec.ts b/src/modules/dropdown/dropdown.component.spec.ts index 45fdbb92a..2c9227319 100644 --- a/src/modules/dropdown/dropdown.component.spec.ts +++ b/src/modules/dropdown/dropdown.component.spec.ts @@ -123,71 +123,6 @@ 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(); @@ -338,30 +273,69 @@ describe('Dropdown component', () => { verifyMenuVisibility(); })); - it('should open menu if down is pressed', fakeAsync(() => { + it('should navigate menu items with arrow keys', fakeAsync(() => { + openPopoverWithButtonClick(); + + const hostElem = getDropdownMenuHostElement(); + + SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', { + keyboardEventInit: { key: 'ArrowDown' } + }); tick(); fixture.detectChanges(); + tick(); - const hostElem = getDropdownHostElement(); + verifyActiveMenuItemByIndex(0); + verifyFocusedMenuItemByIndex(0); - verifyMenuVisibility(false); + SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', { + keyboardEventInit: { key: 'ArrowDown' } + }); + tick(); + fixture.detectChanges(); + tick(); + + // The second item is disabled, so it should be skipped! + verifyActiveMenuItemByIndex(2); + verifyFocusedMenuItemByIndex(2); SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', { - keyboardEventInit: { key: 'Down' } + keyboardEventInit: { key: 'ArrowUp' } }); tick(); fixture.detectChanges(); tick(); - verifyMenuVisibility(); - })); + // The second item is disabled, so it should be skipped! + verifyActiveMenuItemByIndex(0); + verifyFocusedMenuItemByIndex(0); - it('should navigate menu items with arrow keys', fakeAsync(() => { - verifyArrowKeyNavigation('ArrowDown', 'ArrowUp'); - })); + // 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); + + SkyAppTestUtility.fireDomEvent(hostElem, 'keydown', { + keyboardEventInit: { key: 'ArrowUp' } + }); + tick(); + fixture.detectChanges(); + tick(); - it('should navigate menu items with internet explorer arrow keys', fakeAsync(() => { - verifyArrowKeyNavigation('Down', 'Up'); + verifyActiveMenuItemByIndex(3); + verifyFocusedMenuItemByIndex(3); })); it('should focus the first item if opened with enter key', fakeAsync(() => { diff --git a/src/modules/dropdown/dropdown.component.ts b/src/modules/dropdown/dropdown.component.ts index cf718cfff..628bed36a 100644 --- a/src/modules/dropdown/dropdown.component.ts +++ b/src/modules/dropdown/dropdown.component.ts @@ -135,7 +135,6 @@ 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; @@ -154,7 +153,6 @@ export class SkyDropdownComponent implements OnInit, OnDestroy { this.isKeyboardActive = true; break; - case 'down': case 'arrowdown': this.isKeyboardActive = true; this.sendMessage(SkyDropdownMessageType.Open);