diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index d2badc3099ec..791a9949f14f 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -293,6 +293,29 @@ describe('MatSelect', () => { 'Expected value from second option to have been set on the model.'); })); + it('should select first/last options via the HOME/END keys on a closed select', + fakeAsync(() => { + const formControl = fixture.componentInstance.control; + const firstOption = fixture.componentInstance.options.first; + const lastOption = fixture.componentInstance.options.last; + + expect(formControl.value).toBeFalsy('Expected no initial value.'); + + const endEvent = dispatchKeyboardEvent(select, 'keydown', END); + + expect(endEvent.defaultPrevented).toBe(true); + expect(lastOption.selected).toBe(true, 'Expected last option to be selected.'); + expect(formControl.value).toBe(lastOption.value, + 'Expected value from last option to have been set on the model.'); + + const homeEvent = dispatchKeyboardEvent(select, 'keydown', HOME); + + expect(homeEvent.defaultPrevented).toBe(true); + expect(firstOption.selected).toBe(true, 'Expected first option to be selected.'); + expect(formControl.value).toBe(firstOption.value, + 'Expected value from first option to have been set on the model.'); + })); + it('should resume focus from selected item after selecting via click', fakeAsync(() => { const formControl = fixture.componentInstance.control; const options = fixture.componentInstance.options.toArray(); diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 1d37781bd82b..b61700322b33 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -691,15 +691,21 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, private _handleClosedKeydown(event: KeyboardEvent): void { const keyCode = event.keyCode; const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW || - keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW; + keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW; const isOpenKey = keyCode === ENTER || keyCode === SPACE; + const manager = this._keyManager; // Open the select on ALT + arrow key to match the native