diff --git a/src/lib/list/selection-list.spec.ts b/src/lib/list/selection-list.spec.ts index 56fdb7b8f6d2..216c3760abb3 100644 --- a/src/lib/list/selection-list.spec.ts +++ b/src/lib/list/selection-list.spec.ts @@ -1,6 +1,6 @@ -import {DOWN_ARROW, SPACE, ENTER, UP_ARROW} from '@angular/cdk/keycodes'; +import {DOWN_ARROW, SPACE, ENTER, UP_ARROW, HOME, END} from '@angular/cdk/keycodes'; import {Platform} from '@angular/cdk/platform'; -import {createKeyboardEvent, dispatchFakeEvent} from '@angular/cdk/testing'; +import {createKeyboardEvent, dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing'; import {Component, DebugElement} from '@angular/core'; import {async, ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; @@ -264,6 +264,29 @@ describe('MatSelectionList without forms', () => { expect(manager.activeItemIndex).toEqual(3); }); + it('should focus the first non-disabled item when pressing HOME', () => { + const manager = selectionList.componentInstance._keyManager; + expect(manager.activeItemIndex).toBe(-1); + + const event = dispatchKeyboardEvent(selectionList.nativeElement, 'keydown', HOME); + fixture.detectChanges(); + + // Note that the first item is disabled so we expect the second one to be focused. + expect(manager.activeItemIndex).toBe(1); + expect(event.defaultPrevented).toBe(true); + }); + + it('should focus the last item when pressing END', () => { + const manager = selectionList.componentInstance._keyManager; + expect(manager.activeItemIndex).toBe(-1); + + const event = dispatchKeyboardEvent(selectionList.nativeElement, 'keydown', END); + fixture.detectChanges(); + + expect(manager.activeItemIndex).toBe(3); + expect(event.defaultPrevented).toBe(true); + }); + it('should be able to select all options', () => { const list: MatSelectionList = selectionList.componentInstance; diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts index b528a24189a9..02849ebd3d2b 100644 --- a/src/lib/list/selection-list.ts +++ b/src/lib/list/selection-list.ts @@ -9,7 +9,7 @@ import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {SelectionModel} from '@angular/cdk/collections'; -import {SPACE, ENTER} from '@angular/cdk/keycodes'; +import {SPACE, ENTER, HOME, END} from '@angular/cdk/keycodes'; import { AfterContentInit, Attribute, @@ -356,6 +356,12 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu // Always prevent space from scrolling the page since the list has focus event.preventDefault(); break; + case HOME: + case END: + event.keyCode === HOME ? this._keyManager.setFirstItemActive() : + this._keyManager.setLastItemActive(); + event.preventDefault(); + break; default: this._keyManager.onKeydown(event); }