fix(module: search-bar) fix IME input (#758)

NG-ZORRO · Nov 18, 2020 · c184b27 · c184b27
1 parent 9089a24
commit c184b27
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/components/search-bar/search-bar.component.html b/components/search-bar/search-bar.component.html
@@ -9,7 +9,7 @@
         <i class="{{ prefixCls }}-synthetic-ph-icon"></i>
         <span
           class="{{ prefixCls }}-synthetic-ph-placeholder"
-          [ngStyle]="{ visibility: placeholder && !value ? 'visible' : 'hidden' }"
+          [ngStyle]="{ visibility: placeholder && !isComposing && !value ? 'visible' : 'hidden' }"
         >
           {{ placeholder }}
         </span>
@@ -28,6 +28,8 @@
       (blur)="onSearchbarBlur()"
       (focus)="onSearchbarFocus()"
       (ngModelChange)="onSearchbarChange($event)"
+      (compositionstart)="onSetCompositionState(true)"
+      (compositionend)="onSetCompositionState(false)"
     />
     <a [ngClass]="clearCls" style="box-sizing: content-box;transition: 0s" (click)="onSearchbarClear()"></a>
   </div>

diff --git a/components/search-bar/search-bar.component.ts b/components/search-bar/search-bar.component.ts
@@ -45,6 +45,7 @@ export class SearchBarComponent implements OnInit, AfterViewInit, AfterViewCheck
   cancelCls: object = {
     [`${this.prefixCls}-cancel`]: true
   };
+  isComposing = false;
 
   private _defaultValue: string = '';
   private _value: string = '';
@@ -250,6 +251,10 @@ export class SearchBarComponent implements OnInit, AfterViewInit, AfterViewCheck
     this.onSearchbarFocus();
   }
 
+  onSetCompositionState(isComposing: boolean) {
+    this.isComposing = isComposing;
+  }
+
   writeValue(value: any): void {
     this._value = value || '';
     this.inputElementRef.nativeElement.value = this._value;