fix: tag input not hide placeholder when update (#35)

Co-authored-by: Guodong Zang <[email protected]>
alauda · Jul 14, 2020 · 5289daa · 5289daa
1 parent 4b05ac3
commit 5289daa
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
   }