fix(select): don't emit change event multiple times when a reset opti…

…on is selected twice in a row Fixes the select's change events being fired when a reset option is selected twice in a row. Fixes angular#10675.
crisbeto · Jun 20, 2018 · 53358ba · 53358ba
1 parent ee2732a
commit 53358ba
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
@@ -2805,6 +2805,40 @@ describe('MatSelect', () => {
       expect(spy).toHaveBeenCalledWith('steak-0');
     }));
 
+    it('should not emit the change event multiple times when a reset option is ' +
+      'selected twice in a row', fakeAsync(() => {
+        const fixture = TestBed.createComponent(BasicSelectWithoutForms);
+        const instance = fixture.componentInstance;
+        const spy = jasmine.createSpy('change spy');
+
+        instance.foods[0].value = null;
+        fixture.detectChanges();
+
+        const subscription = instance.select.selectionChange.subscribe(spy);
+
+        fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement.click();
+        fixture.detectChanges();
+        flush();
+
+        (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
+        fixture.detectChanges();
+        flush();
+
+        expect(spy).toHaveBeenCalledTimes(1);
+
+        fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement.click();
+        fixture.detectChanges();
+        flush();
+
+        (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
+        fixture.detectChanges();
+        flush();
+
+        expect(spy).toHaveBeenCalledTimes(1);
+
+        subscription.unsubscribe();
+      }));
+
   });
 
   describe('with option centering disabled', () => {

diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
@@ -880,10 +880,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   private _onSelect(option: MatOption, isUserInput: boolean): void {
     const wasSelected = this._selectionModel.isSelected(option);
 
-    if (option.value == null && !this._multiple) {
-      this._selectionModel.clear();
-      this._propagateChanges(option.value);
-    } else {
+    if (option.value != null || this._multiple) {
       option.selected ? this._selectionModel.select(option) : this._selectionModel.deselect(option);
 
       if (this.multiple) {
@@ -899,6 +896,9 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
           this.focus();
         }
       }
+    } else if (option.value == null && this.value !== option.value) {
+      this._selectionModel.clear();
+      this._propagateChanges(option.value);
     }
 
     if (wasSelected !== this._selectionModel.isSelected(option)) {