fix: empty line when one row filled by tag and optimize #ACP-2796

alauda · Jul 1, 2020 · 4f7d687 · 4f7d687
1 parent 8da8d4d
commit 4f7d687
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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`,
+        );
+      });
+    }
+  }
 }