Skip to content

Commit

Permalink
fix(module: inputitem): fix inputitem onChange does not trigger when …
Browse files Browse the repository at this point in the history 
…typing Chinese characters (#299)
  • Loading branch information
@sWhite01111 @Guoyuanqiang
sWhite01111 authored and Guoyuanqiang committed Feb 27, 2019
1 parent 5ed613e commit e7a925d
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 52 deletions.
4 changes: 2 additions & 2 deletions components/input-item/input-item.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@
[pattern]="pattern"
[style.color]='fontColor'
(ngModelChange)="inputChange($event)"
(compositionstart)="compositionStart($event)"
(compositionend)="compositionEnd($event)"
(compositionstart)="compositionStart()"
(compositionend)="compositionEnd()"
(blur)="inputBlur(value)"
(focus)="inputFocus(value)"
style="outline:none" />
Expand Down
30 changes: 16 additions & 14 deletions components/input-item/input-item.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,20 +71,22 @@ describe('InputComponent', () => {
expect(fakeInput.innerText).toBe('23', 'type is money');
});

it('should input chinese character work', () => {
it('should input chinese character work', fakeAsync(() => {
const inputModelEle = inputModel.nativeElement.querySelector('input');
inputModelEle.value = '哈哈';
inputModelEle.dispatchEvent(new Event('compositionstart'));
inputModelEle.dispatchEvent(new Event('input'));
fixture.detectChanges();
tick(0);
expect(component.modelValue).toBe(undefined);

inputModelEle.value = '哈哈';
inputModelEle.dispatchEvent(new Event('compositionend'));
inputModelEle.dispatchEvent(new Event('input'));
fixture.detectChanges();
tick(0);
expect(component.modelValue).toBe('哈哈');
});
}));

it('should defaultValue work', () => {
component.defaultValue = 'test';
Expand Down Expand Up @@ -289,49 +291,48 @@ describe('InputComponent', () => {
fixture.detectChanges();
expect(component.focusFn).toHaveBeenCalled();
});
it('should OnChange work, type is text', () => {
component.clear = true;
component.value = 'test';
fixture.detectChanges();
component.clickTitle();
const clearEle = inputItem.nativeElement.querySelector('.am-input-clear');
clearEle.click();
expect(component.change).toHaveBeenCalled();

it('should OnChange work, type is text', fakeAsync(() => {
component.inputItemComp.inputType = 'phone';
component.inputItemComp.inputChange('12334');
component.clickTitle();
tick(0);
expect(component.inputItemComp.value).toBe('123 34');

component.inputItemComp.inputChange('123123123123');
component.clickTitle();
tick(0);
expect(component.inputItemComp.value).toBe('123 1231 2312');

component.inputItemComp.inputType = 'bankCard';
component.inputItemComp.inputChange('1231212312');
component.clickTitle();
tick(0);
expect(component.inputItemComp.value).toBe('1231 2123 12');

component.inputItemComp.inputType = 'number';
component.inputItemComp.inputChange('sdf12hah3');
component.clickTitle();
tick(0);
expect(component.inputItemComp.value).toBe('123');

component.inputItemComp.inputType = 'text';
component.inputItemComp.inputChange('sdf12hah3');
component.clickTitle();
tick(0);
expect(component.inputItemComp.value).toBe('sdf12hah3');

component.inputItemComp.inputType = 'password';
component.inputItemComp.inputChange('sdf12hah3');
component.clickTitle();
tick(0);
expect(component.inputItemComp.value).toBe('sdf12hah3');

component.inputItemComp.inputType = 'test';
component.inputItemComp.inputChange('sdf12hah3');
component.clickTitle();
tick(0);
expect(component.inputItemComp.value).toBe('sdf12hah3');
});
}));
it('should OnChange work, type is money', () => {
component.type = 'money';
fixture.detectChanges();
Expand Down Expand Up @@ -370,13 +371,14 @@ describe('InputComponent', () => {
expect(fakeInput.classList).toContain('focus');
});

it('should ngModel work', () => {
it('should ngModel work', fakeAsync(() => {
const inputModelEle = inputModel.nativeElement.querySelector('input');
inputModelEle.value = 'test-ng-model';
inputModelEle.dispatchEvent(new Event('input'));
fixture.detectChanges();
tick(0);
expect(component.modelValue).toBe('test-ng-model');
});
}));
});

@Component({
Expand Down
72 changes: 36 additions & 36 deletions components/input-item/input-item.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,42 +258,42 @@ export class InputItem implements OnInit, OnChanges, ControlValueAccessor {
}

inputChange(e) {
if (this._inputLock && this.inputType === 'text') {
return;
}
let value = e;
switch (this.inputType) {
case 'text':
break;
case 'bankCard':
value = value.replace(/\D/g, '').replace(/(....)(?=.)/g, '$1 ');
break;
case 'phone':
value = value.replace(/\D/g, '').substring(0, 11);
const valueLen = value.length;
if (valueLen > 3 && valueLen < 8) {
value = `${value.substr(0, 3)} ${value.substr(3)}`;
} else if (valueLen >= 8) {
value = `${value.substr(0, 3)} ${value.substr(3, 4)} ${value.substr(7)}`;
}
break;
case 'number':
value = value.replace(/\D/g, '');
break;
case 'password':
break;
default:
this._value = value;
break;
}
this._value = value;

if (this._type !== 'money') {
this.inputElementRef.nativeElement.value = this._value;
}

this._onChange(this._value);
this.onChange.emit(this._value);
setTimeout(() => {
if (this._inputLock && this.inputType === 'text') {
return;
}
let value = e;
switch (this.inputType) {
case 'text':
break;
case 'bankCard':
value = value.replace(/\D/g, '').replace(/(....)(?=.)/g, '$1 ');
break;
case 'phone':
value = value.replace(/\D/g, '').substring(0, 11);
const valueLen = value.length;
if (valueLen > 3 && valueLen < 8) {
value = `${value.substr(0, 3)} ${value.substr(3)}`;
} else if (valueLen >= 8) {
value = `${value.substr(0, 3)} ${value.substr(3, 4)} ${value.substr(7)}`;
}
break;
case 'number':
value = value.replace(/\D/g, '');
break;
case 'password':
break;
default:
this._value = value;
break;
}
this._value = value;
if (this._type !== 'money') {
this.inputElementRef.nativeElement.value = this._value;
}
this._onChange(this._value);
this.onChange.emit(this._value);
}, 0);
}

compositionStart() {
Expand Down

0 comments on commit e7a925d

Please sign in to comment.