Skip to content

Commit

Permalink
fix(autocomplete): not scrolling to active option when pressing home/…
Browse files Browse the repository at this point in the history
…end (#3709)
  • Loading branch information
crisbeto authored and kara committed Apr 18, 2017
1 parent 78985b7 commit 8d0cd04
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 3 deletions.
13 changes: 11 additions & 2 deletions src/lib/autocomplete/autocomplete-trigger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -228,11 +228,20 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
this.activeOption._selectViaInteraction();
event.preventDefault();
} else {
const prevActiveItem = this.autocomplete._keyManager.activeItem;
const isArrowKey = event.keyCode === UP_ARROW || event.keyCode === DOWN_ARROW;

this.autocomplete._keyManager.onKeydown(event);
if (event.keyCode === UP_ARROW || event.keyCode === DOWN_ARROW) {

if (isArrowKey) {
this.openPanel();
Promise.resolve().then(() => this._scrollToOption());
}

Promise.resolve().then(() => {
if (isArrowKey || this.autocomplete._keyManager.activeItem !== prevActiveItem) {
this._scrollToOption();
}
});
}
}

Expand Down
32 changes: 31 additions & 1 deletion src/lib/autocomplete/autocomplete.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {MdInputModule} from '../input/index';
import {Dir, LayoutDirection} from '../core/rtl/dir';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {Subscription} from 'rxjs/Subscription';
import {ENTER, DOWN_ARROW, SPACE, UP_ARROW} from '../core/keyboard/keycodes';
import {ENTER, DOWN_ARROW, SPACE, UP_ARROW, HOME, END} from '../core/keyboard/keycodes';
import {MdOption} from '../core/option/option';
import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
import {FakeViewportRuler} from '../core/overlay/position/fake-viewport-ruler';
Expand Down Expand Up @@ -747,6 +747,36 @@ 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');

const END_EVENT = new MockKeyboardEvent(END) as KeyboardEvent;
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.');
}));

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

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

const HOME_EVENT = new MockKeyboardEvent(HOME) as KeyboardEvent;
fixture.componentInstance.trigger._handleKeydown(HOME_EVENT);
tick();
fixture.detectChanges();

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

});

describe('aria', () => {
Expand Down

0 comments on commit 8d0cd04

Please sign in to comment.