update: button-toggle should emit change event when native input does.

Author: devversion

src/components/button-toggle/button-toggle.html

@@ -5,7 +5,8 @@
          [checked]="checked"
          [disabled]="disabled"
          [name]="name"
-         (change)="_onInputChange($event)">
+         (change)="_onInputChange($event)"
+         (click)="_onInputClick($event)">
 
   <div class="md-button-toggle-label-content">
     <ng-content></ng-content>

src/components/button-toggle/button-toggle.spec.ts

@@ -41,11 +41,13 @@ describe('MdButtonToggle', () => {
   }));
 
   describe('inside of an exclusive selection group', () => {
+
     let fixture: ComponentFixture<ButtonTogglesInsideButtonToggleGroup>;
     let groupDebugElement: DebugElement;
     let groupNativeElement: HTMLElement;
     let buttonToggleDebugElements: DebugElement[];
     let buttonToggleNativeElements: HTMLElement[];
+    let buttonToggleLabelElements: HTMLLabelElement[];
     let groupInstance: MdButtonToggleGroup;
     let buttonToggleInstances: MdButtonToggle[];
     let testComponent: ButtonTogglesInsideButtonToggleGroup;
@@ -62,8 +64,13 @@ describe('MdButtonToggle', () => {
         groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup);
 
         buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle));
-        buttonToggleNativeElements =
-            buttonToggleDebugElements.map(debugEl => debugEl.nativeElement);
+
+        buttonToggleNativeElements = buttonToggleDebugElements
+          .map(debugEl => debugEl.nativeElement);
+
+        buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('label'))
+          .map(debugEl => debugEl.nativeElement);
+
         buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance);
       });
     }));
@@ -133,15 +140,19 @@ describe('MdButtonToggle', () => {
       let changeSpy = jasmine.createSpy('button-toggle change listener');
       buttonToggleInstances[0].change.subscribe(changeSpy);
 
-      buttonToggleInstances[0].checked = true;
+
+      buttonToggleLabelElements[0].click();
       fixture.detectChanges();
       tick();
       expect(changeSpy).toHaveBeenCalled();
 
-      buttonToggleInstances[0].checked = false;
+      buttonToggleLabelElements[0].click();
       fixture.detectChanges();
       tick();
-      expect(changeSpy).toHaveBeenCalledTimes(2);
+
+      // The default browser behavior is to not emit a change event, when the value was set
+      // to false. That's why the change event was only triggered once.
+      expect(changeSpy).toHaveBeenCalledTimes(1);
     }));
 
     it('should emit a change event from the button toggle group', fakeAsync(() => {

src/components/button-toggle/button-toggle.ts

@@ -303,10 +303,6 @@ export class MdButtonToggle implements OnInit {
         // Notify all button toggles with the same name (in the same group) to un-check.
         this.buttonToggleDispatcher.notify(this.id, this.name);
       }
-
-      if (newCheckedState != this._checked) {
-        this._emitChangeEvent();
-      }
     }
 
     this._checked = newCheckedState;
@@ -368,6 +364,21 @@ export class MdButtonToggle implements OnInit {
     } else {
       this._toggle();
     }
+
+    // Emit a change event when the native input does.
+    this._emitChangeEvent();
+  }
+
+  _onInputClick(event: Event) {
+
+    // We have to stop propagation for click events on the visual hidden input element.
+    // By default, when a user clicks on a label element, a generated click event will be
+    // dispatched on the associated input element. Since we are using a label element as our
+    // root container, the click event on the `slide-toggle` will be executed twice.
+    // The real click event will bubble up, and the generated click event also tries to bubble up.
+    // This will lead to multiple click events.
+    // Preventing bubbling for the second event will solve that issue.
+    event.stopPropagation();
   }
 }