diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index 4edeb9c0fcb4..ceb58b2de00c 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -3847,6 +3847,28 @@ describe('MatSelect', () => { expect(fixture.componentInstance.select._keyManager.activeItemIndex).toBe(2); })); + it('should be to select an option with a `null` value', fakeAsync(() => { + fixture.componentInstance.foods = [ + { value: null, viewValue: 'Steak' }, + { value: 'pizza-1', viewValue: 'Pizza' }, + { value: null, viewValue: 'Tacos' }, + ]; + + fixture.detectChanges(); + trigger.click(); + fixture.detectChanges(); + + const options = overlayContainerElement.querySelectorAll('mat-option') as + NodeListOf; + + options[0].click(); + options[1].click(); + options[2].click(); + fixture.detectChanges(); + + expect(testInstance.control.value).toEqual([null, 'pizza-1', null]); + })); + }); }); diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 71133aa039a3..513477de2cee 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -870,18 +870,18 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, private _onSelect(option: MatOption, isUserInput: boolean): void { const wasSelected = this._selectionModel.isSelected(option); - if (option.value == null) { + if (option.value == null && !this._multiple) { this._selectionModel.clear(); this._propagateChanges(option.value); } else { option.selected ? this._selectionModel.select(option) : this._selectionModel.deselect(option); - // TODO(crisbeto): handle blank/null options inside multi-select. if (this.multiple) { this._sortValues(); if (isUserInput) { this._keyManager.setActiveItem(option); + // In case the user selected the option with their mouse, we // want to restore focus back to the trigger, in order to // prevent the select keyboard controls from clashing with