fix(toggle): Each click on the toggle emits two events instead of one…

… #UIM-476
positive-js · Aug 13, 2020 · 501de80 · 501de80
1 parent 1968124
commit 501de80
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/packages/mosaic-dev/toggle/module.ts b/packages/mosaic-dev/toggle/module.ts
@@ -1,6 +1,6 @@
 // tslint:disable:no-console
 import { Component, NgModule, ViewEncapsulation } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -22,6 +22,13 @@ export class DemoComponent {
     valueBigOn: boolean = true;
 
     disabled: boolean = false;
+
+    toggleControl = new FormControl(true);
+
+    constructor() {
+        // tslint:disable-next-line
+        this.toggleControl.valueChanges.subscribe(console.log);
+    }
 }
 
 
@@ -34,7 +41,8 @@ export class DemoComponent {
         BrowserAnimationsModule,
         FormsModule,
         McToggleModule,
-        McButtonModule
+        McButtonModule,
+        ReactiveFormsModule
     ],
     bootstrap: [
         DemoComponent

diff --git a/packages/mosaic-dev/toggle/template.html b/packages/mosaic-dev/toggle/template.html
@@ -1,5 +1,7 @@
 <div class="container">
     <h1>Toggles</h1>
+    <mc-toggle class="mc-toggle_small" [formControl]="toggleControl"></mc-toggle>
+    <pre>value = {{toggleControl.value | json}}</pre>
 
     <div class="control-buttons-container">
         <button mc-button (click)="disabled = false">Set Enabled</button>

diff --git a/packages/mosaic/toggle/toggle.component.html b/packages/mosaic/toggle/toggle.component.html
@@ -1,7 +1,8 @@
-<label [attr.for]="inputId" class="mc-toggle-layout" #label>
+<label [attr.for]="inputId" class="mc-toggle-layout">
     <div class="mc-toggle__container" [class.left]="labelPosition === 'left'">
         <input #input
                type="checkbox"
+               role="switch"
                class="mc-toggle-input cdk-visually-hidden"
                [id]="inputId"
                [checked]="checked"
@@ -13,7 +14,7 @@
                [attr.aria-labelledby]="ariaLabelledby"
                [attr.aria-checked]="getAriaChecked()"
                (click)="onInputClick($event)"
-               (change)="onInteractionEvent($event)"/>
+               (change)="onChangeEvent($event)"/>
         <div class="mc-toggle-bar-container">
             <div class="mc-toggle__overlay"></div>
             <div class="mc-toggle-bar">

diff --git a/packages/mosaic/toggle/toggle.component.ts b/packages/mosaic/toggle/toggle.component.ts
@@ -148,8 +148,11 @@ export class McToggleComponent extends McToggleMixinBase
         return this.checked;
     }
 
-    onInteractionEvent(event: Event) {
+    onChangeEvent(event: Event) {
         event.stopPropagation();
+
+        this.updateModelValue();
+        this.emitChangeEvent();
     }
 
     onLabelTextChange() {
@@ -158,8 +161,6 @@ export class McToggleComponent extends McToggleMixinBase
 
     onInputClick(event: MouseEvent) {
         event.stopPropagation();
-        this.updateModelValue();
-        this.emitChangeEvent();
     }
 
     writeValue(value: any) {
@@ -186,7 +187,6 @@ export class McToggleComponent extends McToggleMixinBase
 
     private updateModelValue() {
         this._checked = !this.checked;
-        this.onChangeCallback(this.checked);
         this.onTouchedCallback();
     }