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

alauda · Jul 1, 2020 · 437cfb3 · 437cfb3
1 parent 8da8d4d
commit 437cfb3
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 13 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
@@ -40,6 +40,7 @@ import { TagClassFn } from '../select.types';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  /* eslint-disable no-use-before-define */
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -68,6 +69,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)} ${
@@ -102,7 +108,7 @@ export class MultiSelectComponent extends BaseSelect<unknown[]>
   focused = false;
   trackByValue = (_: number, item: OptionComponent) => this.trackFn(item.value);
 
-  constructor(cdr: ChangeDetectorRef, private readonly renderer: Renderer2) {
+  constructor(cdr: ChangeDetectorRef, private readonly _renderer: Renderer2) {
     super(cdr);
     this.values$.pipe(takeUntil(this.destroy$$)).subscribe(values => {
       this.selectedValues = values;
@@ -163,18 +169,12 @@ export class MultiSelectComponent extends BaseSelect<unknown[]>
   onHideOptions() {
     super.onHideOptions();
     this.inputRef.nativeElement.value = '';
-    this.renderer.removeStyle(this.inputRef.nativeElement, 'width');
+    this._renderer.removeStyle(this.inputRef.nativeElement, 'width');
   }
 
   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();
   }
 
@@ -184,6 +184,7 @@ export class MultiSelectComponent extends BaseSelect<unknown[]>
 
   onInputBlur() {
     this.focused = false;
+    this.inputValue = '';
     this.closeOption();
   }
 
@@ -214,7 +215,7 @@ export class MultiSelectComponent extends BaseSelect<unknown[]>
 
   writeValue(val: any[]) {
     this.value$$.next(val || []);
-    this.resetInput();
+    this._resetInput();
     requestAnimationFrame(() => {
       this.tooltipRef.updatePosition();
     });
@@ -238,7 +239,7 @@ export class MultiSelectComponent extends BaseSelect<unknown[]>
     const values = this.selectedValues.concat(value);
     this.emitValueChange(values);
     if (this.onChange) {
-      this.resetInput();
+      this._resetInput();
       requestAnimationFrame(() => {
         this.tooltipRef.updatePosition();
       });
@@ -251,7 +252,7 @@ export class MultiSelectComponent extends BaseSelect<unknown[]>
     );
     this.emitValueChange(values);
     if (this.onChange) {
-      this.resetInput();
+      this._resetInput();
       requestAnimationFrame(() => {
         this.tooltipRef.updatePosition();
       });
@@ -264,8 +265,29 @@ export class MultiSelectComponent extends BaseSelect<unknown[]>
     event.preventDefault();
   }
 
-  private resetInput() {
+  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`,
+        );
+      });
+    }
+  }
 }