feat: add [compositionFilter] to InputItem (#735)

NG-ZORRO · Jul 20, 2020 · 1d73f30 · 1d73f30
1 parent 7964432
commit 1d73f30
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/components/input-item/doc/index.en-US.md b/components/input-item/doc/index.en-US.md
@@ -31,6 +31,7 @@ Properties | Descrition | Type | Default
 | `[updatePlaceholder]` | Whether to replace the placeholder with cleared content | `boolean` | `false` |
 | `[prefixListCls]` | The class name prefix of list | `string` | `'am-list'` |
 | `[moneyKeyboardAlign]` | Text align direction, only `type='money'` support this api | `'left' \| 'right'` | `'right'` |
+| `[compositionFilter]` | When it is `true` , input mode of PinYin, the value never change before finish input, you can search `compositionstart` event to know more | `boolean` | `true` |
 | `[locale]` | International，can override global configuration,  when`type`is`money`，can cunstom the keyboard confirm item's label | `{ confirmLabel }` | - |
 | `(onErrorClick)` | Callback that is called when the error icon is clicked | `EventEmitter<object>` | - |
 | `(onExtraClick)` | Callback that is called when the extra content is clicked | `EventEmitter<object>` | - |

diff --git a/components/input-item/doc/index.zh-CN.md b/components/input-item/doc/index.zh-CN.md
@@ -34,6 +34,7 @@ subtitle: 文本输入
 | `[updatePlaceholder]` | 当清除内容时，是否将清除前的内容替换到 placeholder 中 | `boolean` | `false` |
 | `[prefixListCls]` | 列表 className 前缀 | `string` | `'am-list'` |
 | `[moneyKeyboardAlign]` | 文字排版起始方向, 只有 `type='money'` 支持 | `'left' \| 'right'` | `'right'` |
+| `[compositionFilter]` | 当为 `true` 时, 移动端的拼音输入模式下, 在未完成输入前不会变更值, 可以搜下 `compositionstart` 事件以了解更多 | `boolean` | `true` |
 | `[locale]` | 国际化，可覆盖全局的配置, 当`type`为`money`，可以自定义确认按钮的文案 | `{ confirmLabel }` | - |
 | `(onErrorClick)` | 点击报错 icon 触发的回调函数 | `EventEmitter<object>` | - |
 | `(onExtraClick)` | extra 点击事件触发的回调函数 | `EventEmitter<object>` | - |

diff --git a/components/input-item/input-item.component.ts b/components/input-item/input-item.component.ts
@@ -232,6 +232,8 @@ export class InputItemComponent implements OnInit, AfterViewInit, ControlValueAc
     this.setCls();
   }
 
+  @Input() compositionFilter = true;
+
   @Output()
   onChange: EventEmitter<any> = new EventEmitter<any>();
   @Output()
@@ -280,8 +282,9 @@ export class InputItemComponent implements OnInit, AfterViewInit, ControlValueAc
   }
 
   inputChange(inputValue: string) {
+    // 'compositionend' is earlier than ngModelChange, Therefore use timer to make ngModelChange runs after 'compositionend' event
     setTimeout(() => {
-      if (this._inputLock && this.inputType === 'text') {
+      if (this.compositionFilter && this._inputLock && this.inputType === 'text') {
         return;
       }
       let value = inputValue;