fix(module: input-item): fix ios9 chinese character bug (#249)

NG-ZORRO · Jan 16, 2019 · f421746 · f421746
1 parent 3e7efd4
commit f421746
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 1 deletion.
diff --git a/components/input-item/input-item.component.html b/components/input-item/input-item.component.html
@@ -21,7 +21,7 @@
       <input #inputElement
              [type]="type"
              [name]="name"
-             [(ngModel)]="value"
+             [ngModel]="value"
              [defaultValue]="defaultValue"
              [placeholder]="placeholder"
              [disabled]="disabled"
@@ -31,6 +31,8 @@
              [pattern]="pattern"
              [style.color]='fontColor'
              (ngModelChange)="inputChange($event)"
+             (compositionstart)="compositionStart($event)"
+             (compositionend)="compositionEnd($event)"
              (blur)="inputBlur(value)"
              (focus)="inputFocus(value)"
              style="outline:none" />

diff --git a/components/input-item/input-item.component.spec.ts b/components/input-item/input-item.component.spec.ts
@@ -71,6 +71,21 @@ describe('InputComponent', () => {
     expect(fakeInput.innerText).toBe('23', 'type is money');
   });
 
+  it('should input chinese character work', () => {
+    const inputModelEle = inputModel.nativeElement.querySelector('input');
+    inputModelEle.value = '哈哈';
+    inputModelEle.dispatchEvent(new Event('compositionstart'));
+    inputModelEle.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+    expect(component.modelValue).toBe(undefined);
+
+    inputModelEle.value = '哈哈';
+    inputModelEle.dispatchEvent(new Event('compositionend'));
+    inputModelEle.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+    expect(component.modelValue).toBe('哈哈');
+  });
+
   it('should defaultValue work', () => {
     component.defaultValue = 'test';
     fixture.detectChanges();

diff --git a/components/input-item/input-item.component.ts b/components/input-item/input-item.component.ts
@@ -54,6 +54,7 @@ export class InputItem implements OnInit, OnChanges, ControlValueAccessor {
   private _focus: boolean = false;
   private _isClear: boolean = false;
   private _fontColor: string;
+  private _inputLock = false;
 
   @ViewChild('lableContent')
   lableRef;
@@ -257,6 +258,9 @@ export class InputItem implements OnInit, OnChanges, ControlValueAccessor {
   }
 
   inputChange(e) {
+    if (this._inputLock && this.inputType === 'text') {
+      return;
+    }
     let value = e;
     switch (this.inputType) {
       case 'text':
@@ -292,6 +296,14 @@ export class InputItem implements OnInit, OnChanges, ControlValueAccessor {
     this.onChange.emit(this._value);
   }
 
+  compositionStart() {
+    this._inputLock = true;
+  }
+
+  compositionEnd() {
+    this._inputLock = false;
+  }
+
   inputFocus(value) {
     setTimeout(() => {
       this._focus = true;