fix(module:input-number): fix focused style could not be removed afte…

…r blur (#1453) close #1449
NG-ZORRO · May 22, 2018 · 80a559f · 80a559f
1 parent cbc508b
commit 80a559f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/components/input-number/nz-input-number.component.ts b/components/input-number/nz-input-number.component.ts
@@ -219,10 +219,16 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
   }
 
   down(e: MouseEvent | KeyboardEvent, ratio?: number): void {
+    if (!this.isFocused) {
+      this.focus();
+    }
     this.step('down', e, ratio);
   }
 
   up(e: MouseEvent | KeyboardEvent, ratio?: number): void {
+    if (!this.isFocused) {
+      this.focus();
+    }
     this.step('up', e, ratio);
   }
 

diff --git a/components/input-number/nz-input-number.spec.ts b/components/input-number/nz-input-number.spec.ts
@@ -11,8 +11,8 @@ import { NzInputNumberModule } from './nz-input-number.module';
 describe('input number', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports     : [ NzInputNumberModule, FormsModule, ReactiveFormsModule ],
-      declarations: [ NzTestInputNumberBasicComponent, NzTestInputNumberFormComponent ]
+      imports     : [NzInputNumberModule, FormsModule, ReactiveFormsModule],
+      declarations: [NzTestInputNumberBasicComponent, NzTestInputNumberFormComponent]
     });
     TestBed.compileComponents();
   }));
@@ -375,6 +375,21 @@ describe('input number', () => {
       fixture.detectChanges();
       expect(inputElement.value).toBe(newFormatter(initValue));
     }));
+    // #1449
+    it('should up and down focus input', (() => {
+      dispatchFakeEvent(upHandler, 'mousedown');
+      fixture.detectChanges();
+      expect(inputNumber.nativeElement.classList).toContain('ant-input-number-focused');
+      dispatchFakeEvent(inputElement, 'blur');
+      fixture.detectChanges();
+      expect(inputNumber.nativeElement.classList).not.toContain('ant-input-number-focused');
+      dispatchFakeEvent(downHandler, 'mousedown');
+      fixture.detectChanges();
+      expect(inputNumber.nativeElement.classList).toContain('ant-input-number-focused');
+      dispatchFakeEvent(inputElement, 'blur');
+      fixture.detectChanges();
+      expect(inputNumber.nativeElement.classList).not.toContain('ant-input-number-focused');
+    }));
   });
   describe('input number form', () => {
     let fixture;
@@ -466,7 +481,7 @@ export class NzTestInputNumberFormComponent {
 
   constructor(private formBuilder: FormBuilder) {
     this.formGroup = this.formBuilder.group({
-      inputNumber: [ 1 ]
+      inputNumber: [1]
     });
   }