Skip to content
This repository has been archived by the owner on Dec 8, 2022. It is now read-only.

Commit

Permalink
Revert "Fixed arrow key navigation for dropdown menus in IE 11 #1535 (#…
Browse files Browse the repository at this point in the history 
…1652)"

This reverts commit 349a5d4.
  • Loading branch information
@Blackbaud-StacyCarlos
Blackbaud-StacyCarlos committed May 4, 2018
1 parent 25bc143 commit 7b72dd0
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 80 deletions.
4 changes: 2 additions & 2 deletions src/modules/dropdown/dropdown-menu.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
126 changes: 50 additions & 76 deletions src/modules/dropdown/dropdown.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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(() => {
Expand Down
2 changes: 0 additions & 2 deletions src/modules/dropdown/dropdown.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand Down

0 comments on commit 7b72dd0

Please sign in to comment.