Skip to content

Commit

Permalink
fix(list-key-manager): don't handle home and end keys unless the user…
Browse files Browse the repository at this point in the history 
… is interacting with the element

* Refactors the `ListKeyManager` to only handle the home and end keys after the user has interacted. A list becomes interactive if the previous keypress, that occurred inside it, was handled by the key manager. This allows us to continue supporting skipping to the first/last items with home/end, while also not blocking the default behavior in cases like the select where it can be useful when editing text.
* Reworks the Autocomplete, ListKeyManager and ChipList tests to use the `createKeyboardEvent`, instead of making their own fake keyboard events.
* Adds a `target` parameter to the `createKeyboardEvent` function, allowing us to define the event target.

Fixes #3496.
  • Loading branch information
@crisbeto
crisbeto committed May 14, 2017
1 parent 6121fa1 commit d56e5d2
Show file tree
Hide file tree
Showing 5 changed files with 187 additions and 157 deletions.
73 changes: 36 additions & 37 deletions src/lib/autocomplete/autocomplete.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {MdInputContainer} from '../input/input-container';
import {Observable} from 'rxjs/Observable';
import {Subject} from 'rxjs/Subject';
import {dispatchFakeEvent} from '../core/testing/dispatch-events';
import {createKeyboardEvent} from '../core/testing/event-objects';
import {typeInElement} from '../core/testing/type-in-element';
import {ScrollDispatcher} from '../core/overlay/scroll/scroll-dispatcher';

Expand Down Expand Up @@ -534,8 +535,8 @@ describe('MdAutocomplete', () => {
fixture.detectChanges();

input = fixture.debugElement.query(By.css('input')).nativeElement;
DOWN_ARROW_EVENT = new MockKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
ENTER_EVENT = new MockKeyboardEvent(ENTER) as KeyboardEvent;
DOWN_ARROW_EVENT = createKeyboardEvent('keydown', DOWN_ARROW);
ENTER_EVENT = createKeyboardEvent('keydown', ENTER);

fixture.componentInstance.trigger.openPanel();
fixture.detectChanges();
Expand Down Expand Up @@ -593,7 +594,7 @@ describe('MdAutocomplete', () => {
const optionEls =
overlayContainerElement.querySelectorAll('md-option') as NodeListOf<HTMLElement>;

const UP_ARROW_EVENT = new MockKeyboardEvent(UP_ARROW) as KeyboardEvent;
const UP_ARROW_EVENT = createKeyboardEvent('keydown', UP_ARROW);
fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
tick();
fixture.detectChanges();
Expand Down Expand Up @@ -667,7 +668,7 @@ describe('MdAutocomplete', () => {
typeInElement('New', input);
fixture.detectChanges();

const SPACE_EVENT = new MockKeyboardEvent(SPACE) as KeyboardEvent;
const SPACE_EVENT = createKeyboardEvent('keydown', SPACE);
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);

fixture.whenStable().then(() => {
Expand Down Expand Up @@ -747,7 +748,7 @@ describe('MdAutocomplete', () => {
const scrollContainer =
document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel');

const UP_ARROW_EVENT = new MockKeyboardEvent(UP_ARROW) as KeyboardEvent;
const UP_ARROW_EVENT = createKeyboardEvent('keydown', UP_ARROW);
fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
tick();
fixture.detectChanges();
Expand All @@ -756,35 +757,40 @@ describe('MdAutocomplete', () => {
expect(scrollContainer.scrollTop).toEqual(272, `Expected panel to reveal last option.`);
}));

it('should scroll the active option into view when pressing END', fakeAsync(() => {
tick();
const scrollContainer =
document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel');
it('should scroll the active option into view when pressing END after another interaction',
fakeAsync(() => {
tick();
const scrollContainer =
document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel');

const END_EVENT = new MockKeyboardEvent(END) as KeyboardEvent;
fixture.componentInstance.trigger._handleKeydown(END_EVENT);
tick();
fixture.detectChanges();
const END_EVENT = createKeyboardEvent('keydown', END);
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
fixture.componentInstance.trigger._handleKeydown(END_EVENT);
tick();
fixture.detectChanges();

// Expect option bottom minus the panel height (528 - 256 = 272)
expect(scrollContainer.scrollTop).toEqual(272, 'Expected panel to reveal the last option.');
}));
// Expect option bottom minus the panel height (528 - 256 = 272)
expect(scrollContainer.scrollTop).toEqual(272, 'Expected panel to reveal the last option.');
}));

it('should scroll the active option into view when pressing HOME', fakeAsync(() => {
tick();
const scrollContainer =
document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel');
it('should scroll the active option into view when pressing HOME after another interaction',
fakeAsync(() => {
tick();
const scrollContainer =
document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel');

scrollContainer.scrollTop = 100;
fixture.detectChanges();
scrollContainer.scrollTop = 100;
fixture.detectChanges();

const HOME_EVENT = new MockKeyboardEvent(HOME) as KeyboardEvent;
fixture.componentInstance.trigger._handleKeydown(HOME_EVENT);
tick();
fixture.detectChanges();
const UP_ARROW_EVENT = createKeyboardEvent('keydown', UP_ARROW);
const HOME_EVENT = createKeyboardEvent('keydown', HOME);
fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
fixture.componentInstance.trigger._handleKeydown(HOME_EVENT);
tick();
fixture.detectChanges();

expect(scrollContainer.scrollTop).toEqual(0, 'Expected panel to reveal the first option.');
}));
expect(scrollContainer.scrollTop).toEqual(0, 'Expected panel to reveal the first option.');
}));

});

Expand Down Expand Up @@ -831,7 +837,7 @@ describe('MdAutocomplete', () => {
expect(input.hasAttribute('aria-activedescendant'))
.toBe(false, 'Expected aria-activedescendant to be absent if no active item.');

const DOWN_ARROW_EVENT = new MockKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
const DOWN_ARROW_EVENT = createKeyboardEvent('keydown', DOWN_ARROW);
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);

fixture.whenStable().then(() => {
Expand Down Expand Up @@ -1121,7 +1127,7 @@ describe('MdAutocomplete', () => {
tick();
fixture.detectChanges();

const DOWN_ARROW_EVENT = new MockKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
const DOWN_ARROW_EVENT = createKeyboardEvent('keydown', DOWN_ARROW);
fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
tick();
fixture.detectChanges();
Expand Down Expand Up @@ -1372,10 +1378,3 @@ class AutocompleteWithOnPushDelay implements OnInit {
}, 1000);
}
}


/** This is a mock keyboard event to test keyboard events in the autocomplete. */
class MockKeyboardEvent {
constructor(public keyCode: number) {}
preventDefault() {}
}
17 changes: 5 additions & 12 deletions src/lib/chips/chip-list.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,9 @@ import {Component, DebugElement, QueryList} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MdChip, MdChipList, MdChipsModule} from './index';
import {FocusKeyManager} from '../core/a11y/focus-key-manager';
import {FakeEvent} from '../core/a11y/list-key-manager.spec';
import {SPACE, LEFT_ARROW, RIGHT_ARROW} from '../core/keyboard/keycodes';
import {createKeyboardEvent} from '../core/testing/event-objects';

class FakeKeyboardEvent extends FakeEvent {
constructor(keyCode: number, protected target: HTMLElement) {
super(keyCode);

this.target = target;
}
}

describe('MdChipList', () => {
let fixture: ComponentFixture<any>;
Expand Down Expand Up @@ -117,7 +110,7 @@ describe('MdChipList', () => {
let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
let lastNativeChip = nativeChips[nativeChips.length - 1] as HTMLElement;

let LEFT_EVENT = new FakeKeyboardEvent(LEFT_ARROW, lastNativeChip) as any;
let LEFT_EVENT = createKeyboardEvent('keydown', LEFT_ARROW, lastNativeChip);
let array = chips.toArray();
let lastIndex = array.length - 1;
let lastItem = array[lastIndex];
Expand All @@ -138,7 +131,7 @@ describe('MdChipList', () => {
let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
let firstNativeChip = nativeChips[0] as HTMLElement;

let RIGHT_EVENT: KeyboardEvent = new FakeKeyboardEvent(RIGHT_ARROW, firstNativeChip) as any;
let RIGHT_EVENT = createKeyboardEvent('keydown', RIGHT_ARROW, firstNativeChip);
let array = chips.toArray();
let firstItem = array[0];

Expand All @@ -164,7 +157,7 @@ describe('MdChipList', () => {
let nativeChips = chipListNativeElement.querySelectorAll('md-chip');
let firstNativeChip = nativeChips[0] as HTMLElement;

let SPACE_EVENT: KeyboardEvent = new FakeKeyboardEvent(SPACE, firstNativeChip) as any;
let SPACE_EVENT = createKeyboardEvent('keydown', SPACE, firstNativeChip);
let firstChip: MdChip = chips.toArray()[0];

spyOn(testComponent, 'chipSelect');
Expand Down Expand Up @@ -198,7 +191,7 @@ describe('MdChipList', () => {
});

it('SPACE ignores selection', () => {
let SPACE_EVENT: KeyboardEvent = new FakeEvent(SPACE) as KeyboardEvent;
let SPACE_EVENT = createKeyboardEvent('keydown', SPACE);
let firstChip: MdChip = chips.toArray()[0];

spyOn(testComponent, 'chipSelect');
Expand Down
Loading

0 comments on commit d56e5d2

Please sign in to comment.