From 4f7d687e3d89b5472c8931947e63ff592a5d67dd Mon Sep 17 00:00:00 2001
From: Guodong Zang <gdzang@alauda.io>
Date: Wed, 1 Jul 2020 14:13:34 +0800
Subject: [PATCH] fix: empty line when one row filled by tag and optimize
 #ACP-2796

---
 src/input/tags-input/mixin.scss               |  1 +
 .../multi-select/multi-select.component.html  |  3 ++
 .../multi-select/multi-select.component.ts    | 34 +++++++++++++++----
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/input/tags-input/mixin.scss b/src/input/tags-input/mixin.scss
index 50981b4ff..5b471e34f 100644
--- a/src/input/tags-input/mixin.scss
+++ b/src/input/tags-input/mixin.scss
@@ -123,6 +123,7 @@
         width: 0;
         padding: 0;
         margin: 0;
+        position: absolute;
       }
     }
   }
diff --git a/src/select/multi-select/multi-select.component.html b/src/select/multi-select/multi-select.component.html
index 7ae4e20ba..2b83e8804 100644
--- a/src/select/multi-select/multi-select.component.html
+++ b/src/select/multi-select/multi-select.component.html
@@ -54,6 +54,9 @@
     (keydown)="onKeyDown($event)"
     (input)="onInput($event)"
   />
+  <span #inputValueMirror [class]="bem.element('mirror')">
+    {{ inputValue }}
+  </span>
 </div>
 
 <ng-template #templateRef>
diff --git a/src/select/multi-select/multi-select.component.ts b/src/select/multi-select/multi-select.component.ts
index d234e6645..72e605144 100644
--- a/src/select/multi-select/multi-select.component.ts
+++ b/src/select/multi-select/multi-select.component.ts
@@ -68,6 +68,11 @@ export class MultiSelectComponent extends BaseSelect<unknown[]>
   @ViewChild('inputRef', { static: true })
   inputRef: ElementRef<HTMLInputElement>;
 
+  @ViewChild('inputValueMirror', { static: true })
+  inputValueMirror: ElementRef<HTMLElement>;
+
+  inputValue = '';
+
   get rootClass() {
     const size = this.size || ComponentSize.Medium;
     return `aui-input ${this.bem.block(size)} ${
@@ -168,13 +173,7 @@ export class MultiSelectComponent extends BaseSelect<unknown[]>
 
   onInput(event: Event) {
     super.onInput(event);
-    // TODO: optimize performance
-    this.renderer.removeStyle(this.inputRef.nativeElement, 'width');
-    this.renderer.setStyle(
-      this.inputRef.nativeElement,
-      'width',
-      this.inputRef.nativeElement.scrollWidth + 'px',
-    );
+    this.setInputWidth();
     this.tooltipRef.updatePosition();
   }
 
@@ -266,6 +265,27 @@ export class MultiSelectComponent extends BaseSelect<unknown[]>
 
   private resetInput() {
     this.inputRef.nativeElement.value = '';
+    this.setInputWidth();
     this.filterString = '';
   }
+
+  // calculate input element width according to its value
+  private setInputWidth() {
+    const { value } = this.inputRef.nativeElement;
+    if (!value.length) {
+      this.inputValue = '';
+      requestAnimationFrame(() => {
+        this.renderer.removeStyle(this.inputRef.nativeElement, 'width');
+      });
+    } else {
+      this.inputValue = value;
+      requestAnimationFrame(() => {
+        this.renderer.setStyle(
+          this.inputRef.nativeElement,
+          'width',
+          `${this.inputValueMirror.nativeElement.scrollWidth}px`,
+        );
+      });
+    }
+  }
 }