From 5289daa2862affb2e3083c4bf3d7d69c53fa1cb8 Mon Sep 17 00:00:00 2001
From: zangguodong <237974119@qq.com>
Date: Tue, 14 Jul 2020 15:34:19 +0800
Subject: [PATCH] fix: tag input not hide placeholder when update (#35)

Co-authored-by: Guodong Zang <gdzang@alauda.io>
---
 src/input/tags-input/mixin.scss               |  2 ++
 .../tags-input/tags-input.component.html      |  5 ++-
 .../tags-input/tags-input.component.spec.ts   |  8 +++--
 src/input/tags-input/tags-input.component.ts  | 32 ++++++++++---------
 .../multi-select/multi-select.component.html  |  5 ++-
 .../multi-select/multi-select.component.ts    |  4 ---
 6 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/src/input/tags-input/mixin.scss b/src/input/tags-input/mixin.scss
index 5b471e34f..671956c3b 100644
--- a/src/input/tags-input/mixin.scss
+++ b/src/input/tags-input/mixin.scss
@@ -36,6 +36,8 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      position: absolute;
+      margin-left: 1px;
 
       &[hidden] {
         display: none;
diff --git a/src/input/tags-input/tags-input.component.html b/src/input/tags-input/tags-input.component.html
index 3e17fe8ca..09e9f2b61 100644
--- a/src/input/tags-input/tags-input.component.html
+++ b/src/input/tags-input/tags-input.component.html
@@ -3,7 +3,10 @@
   (mousedown)="$event.preventDefault()"
   (click)="inputRef.focus()"
 >
-  <span [hidden]="!displayPlaceholder" [class]="bem.element('placeholder')">
+  <span
+    [hidden]="(value$ | async).length || inputRef.value.length"
+    [class]="bem.element('placeholder')"
+  >
     {{ placeholder }}
   </span>
   <aui-tag
diff --git a/src/input/tags-input/tags-input.component.spec.ts b/src/input/tags-input/tags-input.component.spec.ts
index 5d702eb3e..79132d5f1 100644
--- a/src/input/tags-input/tags-input.component.spec.ts
+++ b/src/input/tags-input/tags-input.component.spec.ts
@@ -68,16 +68,18 @@ describe('TagsInputComponent', () => {
     expect(ins.value).toEqual(['service']);
   }));
 
-  it('should placeholder show or hidden correctly', () => {
+  it('should placeholder show or hidden correctly', fakeAsync(() => {
     ins.placeholder = 'placeholder';
     fixture.detectChanges();
     const placeholderEl = el.querySelector('.aui-tags-input__placeholder');
     expect(placeholderEl.innerHTML).toContain('placeholder');
     expect(placeholderEl.getAttribute('hidden')).toBeNull();
-    el.dispatchEvent(new Event('click'));
+    ins.value = ['app', 'service'];
+    fixture.detectChanges();
+    tick();
     fixture.detectChanges();
     expect(placeholderEl.getAttribute('hidden')).toBe('');
-  });
+  }));
 });
 
 @Component({
diff --git a/src/input/tags-input/tags-input.component.ts b/src/input/tags-input/tags-input.component.ts
index fdc8895b4..8e49e2206 100644
--- a/src/input/tags-input/tags-input.component.ts
+++ b/src/input/tags-input/tags-input.component.ts
@@ -82,9 +82,9 @@ export class TagsInputComponent extends CommonFormControl<string[]> {
     const size = this.size || ComponentSize.Medium;
     return `aui-input ${this.bem.block(size)} ${
       this.disabled ? 'isDisabled' : ''
-    } ${
-      this.focused ? 'isFocused' : ''
-    } ${this.clearable.toString()} ? 'isClearable' : ''`;
+    } ${this.focused ? 'isFocused' : ''} ${
+      this.clearable ? 'isClearable' : ''
+    }`;
   }
 
   get tagSize() {
@@ -97,14 +97,10 @@ export class TagsInputComponent extends CommonFormControl<string[]> {
 
   get inputClass() {
     return `${this.bem.element('input', {
-      hidden: this.disabled || this.displayPlaceholder,
+      hidden: this.disabled || (!this.snapshot.value.length && !this.focused),
     })} aui-tag aui-tag--${this.tagSize}`;
   }
 
-  get displayPlaceholder() {
-    return !this.snapshot.value.length && !this.focused;
-  }
-
   constructor(cdr: ChangeDetectorRef, private readonly renderer: Renderer2) {
     super(cdr);
   }
@@ -120,13 +116,19 @@ export class TagsInputComponent extends CommonFormControl<string[]> {
   onInput() {
     this.inputValue = this.inputRef.nativeElement.value;
     // make sure value sync to span element
-    requestAnimationFrame(() => {
-      this.renderer.setStyle(
-        this.inputRef.nativeElement,
-        'width',
-        this.inputValueMirror.nativeElement.scrollWidth + 'px',
-      );
-    });
+    if (!this.inputValue.length) {
+      requestAnimationFrame(() => {
+        this.renderer.removeStyle(this.inputRef.nativeElement, 'width');
+      });
+    } else {
+      requestAnimationFrame(() => {
+        this.renderer.setStyle(
+          this.inputRef.nativeElement,
+          'width',
+          this.inputValueMirror.nativeElement.scrollWidth + 'px',
+        );
+      });
+    }
   }
 
   onKeyDown(event: KeyboardEvent) {
diff --git a/src/select/multi-select/multi-select.component.html b/src/select/multi-select/multi-select.component.html
index 2b83e8804..1fec36e99 100644
--- a/src/select/multi-select/multi-select.component.html
+++ b/src/select/multi-select/multi-select.component.html
@@ -23,7 +23,10 @@
       [icon]="loading ? 'spinner' : 'caret_down_s'"
     ></aui-icon>
   </div>
-  <span [hidden]="!displayPlaceholder" [class]="bem.element('placeholder')">
+  <span
+    [hidden]="selectedValues.length || inputRef.value.length"
+    [class]="bem.element('placeholder')"
+  >
     {{ placeholder }}
   </span>
   <aui-tag
diff --git a/src/select/multi-select/multi-select.component.ts b/src/select/multi-select/multi-select.component.ts
index 72e605144..aa5489d3e 100644
--- a/src/select/multi-select/multi-select.component.ts
+++ b/src/select/multi-select/multi-select.component.ts
@@ -96,10 +96,6 @@ export class MultiSelectComponent extends BaseSelect<unknown[]>
     })} aui-tag aui-tag--${this.tagSize}`;
   }
 
-  get displayPlaceholder() {
-    return !this.selectedValues.length && this.inputReadonly;
-  }
-
   get displayClearBtn() {
     return !this.disabled && this.clearable && this.selectedValues.length;
   }