diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index 8c39d7e03ba..9406b158055 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -383,6 +383,21 @@ describe('MatSelect', () => { flush(); }))); + it('should not throw when reaching a reset option using the arrow keys on a closed select', + fakeAsync(() => { + fixture.componentInstance.foods = + [{value: 'steak-0', viewValue: 'Steak'}, {value: null, viewValue: 'None'}]; + fixture.detectChanges(); + fixture.componentInstance.control.setValue('steak-0'); + + expect(() => { + dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW); + fixture.detectChanges(); + }).not.toThrow(); + + flush(); + })); + it('should open a single-selection select using ALT + DOWN_ARROW', fakeAsync(() => { const {control: formControl, select: selectInstance} = fixture.componentInstance; diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index d885c277236..1a772f5e266 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -714,7 +714,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, event.preventDefault(); // prevents the page from scrolling down when pressing space this.open(); } else if (!this.multiple) { - const selectedOption = this.selected; + const previouslySelectedOption = this.selected; if (keyCode === HOME || keyCode === END) { keyCode === HOME ? manager.setFirstItemActive() : manager.setLastItemActive(); @@ -723,10 +723,12 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, manager.onKeydown(event); } + const selectedOption = this.selected; + // Since the value has changed, we need to announce it ourselves. // @breaking-change 8.0.0 remove null check for _liveAnnouncer. - if (this._liveAnnouncer && selectedOption !== this.selected) { - this._liveAnnouncer.announce((this.selected as MatOption).viewValue); + if (this._liveAnnouncer && selectedOption && previouslySelectedOption !== selectedOption) { + this._liveAnnouncer.announce((selectedOption as MatOption).viewValue); } } }