diff --git a/src/lib/list/selection-list.spec.ts b/src/lib/list/selection-list.spec.ts index dcb2e8c452de..befea582cd9f 100644 --- a/src/lib/list/selection-list.spec.ts +++ b/src/lib/list/selection-list.spec.ts @@ -211,6 +211,21 @@ describe('MatSelectionList without forms', () => { expect(ENTER_EVENT.defaultPrevented).toBe(true); }); + it('should not be able to toggle a disabled option using SPACE', () => { + const testListItem = listOptions[1].nativeElement as HTMLElement; + const selectionModel = selectionList.componentInstance.selectedOptions; + + expect(selectionModel.selected.length).toBe(0); + + listOptions[1].componentInstance.disabled = true; + + dispatchFakeEvent(testListItem, 'focus'); + selectionList.componentInstance._keydown(createKeyboardEvent('keydown', SPACE, testListItem)); + fixture.detectChanges(); + + expect(selectionModel.selected.length).toBe(0); + }); + it('should restore focus if active option is destroyed', () => { const manager = selectionList.componentInstance._keyManager; diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts index f2dc0862da31..48dae829e50d 100644 --- a/src/lib/list/selection-list.ts +++ b/src/lib/list/selection-list.ts @@ -410,12 +410,9 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu switch (keyCode) { case SPACE: case ENTER: - if (!this.disabled) { - this._toggleSelectOnFocusedOption(); - - // Always prevent space from scrolling the page since the list has focus - event.preventDefault(); - } + this._toggleFocusedOption(); + // Always prevent space from scrolling the page since the list has focus + event.preventDefault(); break; case HOME: case END: @@ -434,7 +431,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu if ((keyCode === UP_ARROW || keyCode === DOWN_ARROW) && event.shiftKey && manager.activeItemIndex !== previousFocusIndex) { - this._toggleSelectOnFocusedOption(); + this._toggleFocusedOption(); } } @@ -492,14 +489,14 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu return this.options.filter(option => option.selected).map(option => option.value); } - /** Toggles the selected state of the currently focused option. */ - private _toggleSelectOnFocusedOption(): void { + /** Toggles the state of the currently focused option if enabled. */ + private _toggleFocusedOption(): void { let focusedIndex = this._keyManager.activeItemIndex; if (focusedIndex != null && this._isValidIndex(focusedIndex)) { let focusedOption: MatListOption = this.options.toArray()[focusedIndex]; - if (focusedOption) { + if (focusedOption && !focusedOption.disabled) { focusedOption.toggle(); // Emit a change event because the focused option changed its state through user