skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(autocomplete): not scrolling to active option when pressing home/end (#3709)

Browse Source
This commit is contained in:
Kristiyan Kostadinov
2017-04-19 01:44:55 +02:00
committed by Kara
parent 78985b711e
commit 8d0cd04836
2 changed files with 42 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/autocomplete/autocomplete-trigger.ts
+11 -2
View File
@@ -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();
}
});
}
}
src/lib/autocomplete/autocomplete.spec.ts
+31 -1
View File
@@ -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';
@@ -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', () => {