fix(checkbox): prevent second click event from input (#1835)

akveo · Jul 24, 2019 · 115ce08 · 115ce08
1 parent 34cb370
commit 115ce08
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/framework/theme/components/checkbox/checkbox.component.ts b/src/framework/theme/components/checkbox/checkbox.component.ts
@@ -130,13 +130,14 @@ import { convertToBoolProperty } from '../helpers';
     <label class="label">
       <input type="checkbox" class="native-input visually-hidden"
              [disabled]="disabled"
-             [checked]="value"
+             [checked]="checked"
              (change)="updateValueAndIndeterminate($event)"
              (blur)="setTouched()"
+             (click)="$event.stopPropagation()"
              [indeterminate]="indeterminate">
-      <span [class.indeterminate]="indeterminate" [class.checked]="value" class="custom-checkbox">
+      <span [class.indeterminate]="indeterminate" [class.checked]="checked" class="custom-checkbox">
         <nb-icon *ngIf="indeterminate" icon="minus-bold-outline" pack="nebular-essentials"></nb-icon>
-        <nb-icon *ngIf="value && !indeterminate" icon="checkmark-bold-outline" pack="nebular-essentials"></nb-icon>
+        <nb-icon *ngIf="checked && !indeterminate" icon="checkmark-bold-outline" pack="nebular-essentials"></nb-icon>
       </span>
       <span class="text">
         <ng-content></ng-content>

diff --git a/src/framework/theme/components/checkbox/checkbox.spec.ts b/src/framework/theme/components/checkbox/checkbox.spec.ts
@@ -178,6 +178,15 @@ describe('Component: NbCheckbox', () => {
     fixture.detectChanges();
     expect(checkbox.indeterminate).toEqual(false);
   });
+
+  it('should emit click event once', () => {
+    const clickSpy = jasmine.createSpy('checkbox click spy');
+    (fixture.nativeElement as HTMLElement).addEventListener('click', clickSpy);
+
+    label.nativeElement.click();
+
+    expect(clickSpy).toHaveBeenCalledTimes(1);
+  });
 });
 
 /** Test component with reactive forms */