fix(module:switch): fix switch error when loading or disabled (NG-ZOR…

…RO#2896) close NG-ZORRO#2787
wzhudev · Feb 15, 2019 · a67984c · a67984c
1 parent e39f6bf
commit a67984c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/components/switch/nz-switch.component.ts b/components/switch/nz-switch.component.ts
@@ -7,7 +7,6 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  HostListener,
   Input,
   TemplateRef,
   ViewChild,
@@ -31,6 +30,9 @@ import { InputBoolean } from '../core/util/convert';
       multi      : true
     }
   ],
+  host               : {
+    '(click)': 'hostClick($event)'
+  },
   styles             : [ `
     nz-switch {
       display: inline-block;
@@ -39,20 +41,19 @@ import { InputBoolean } from '../core/util/convert';
 })
 export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit {
   checked = false;
-  @ViewChild('switchElement') private switchElement: ElementRef;
   onChange: (value: boolean) => void = () => null;
   onTouched: () => void = () => null;
+  @ViewChild('switchElement') private switchElement: ElementRef;
   @Input() @InputBoolean() nzLoading = false;
   @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzControl = false;
   @Input() nzCheckedChildren: string | TemplateRef<void>;
   @Input() nzUnCheckedChildren: string | TemplateRef<void>;
   @Input() nzSize: NzSizeDSType;
 
-  @HostListener('click', [ '$event' ])
-  onClick(e: MouseEvent): void {
+  hostClick(e: MouseEvent): void {
     e.preventDefault();
-    if ((!this.nzDisabled) && (!this.nzLoading) && (!this.nzControl)) {
+    if (!this.nzDisabled && !this.nzLoading && !this.nzControl) {
       this.updateValue(!this.checked);
     }
   }
@@ -65,14 +66,14 @@ export class NzSwitchComponent implements ControlValueAccessor, AfterViewInit {
   }
 
   onKeyDown(e: KeyboardEvent): void {
-    if (!this.nzControl) {
-      if (e.keyCode === LEFT_ARROW) { // Left
+    if (!this.nzControl && !this.nzDisabled && !this.nzLoading) {
+      if (e.keyCode === LEFT_ARROW) {
         this.updateValue(false);
         e.preventDefault();
-      } else if (e.keyCode === RIGHT_ARROW) { // Right
+      } else if (e.keyCode === RIGHT_ARROW) {
         this.updateValue(true);
         e.preventDefault();
-      } else if (e.keyCode === SPACE || e.keyCode === ENTER) { // Space, Enter
+      } else if (e.keyCode === SPACE || e.keyCode === ENTER) {
         this.updateValue(!this.checked);
         e.preventDefault();
       }

diff --git a/components/switch/nz-switch.spec.ts b/components/switch/nz-switch.spec.ts
@@ -127,6 +127,21 @@ describe('switch', () => {
       fixture.detectChanges();
       expect(testComponent.value).toBe(false);
       expect(testComponent.modelChange).toHaveBeenCalledTimes(4);
+      testComponent.control = false;
+      testComponent.loading = true;
+      fixture.detectChanges();
+      dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', ENTER);
+      fixture.detectChanges();
+      expect(testComponent.value).toBe(false);
+      expect(testComponent.modelChange).toHaveBeenCalledTimes(4);
+      testComponent.control = false;
+      testComponent.loading = false;
+      testComponent.disabled = true;
+      fixture.detectChanges();
+      dispatchKeyboardEvent(switchElement.nativeElement.firstElementChild, 'keydown', ENTER);
+      fixture.detectChanges();
+      expect(testComponent.value).toBe(false);
+      expect(testComponent.modelChange).toHaveBeenCalledTimes(4);
     });
     it('should children work', fakeAsync(() => {
       fixture.detectChanges();