fix(legacy): MultiSelect empty line when non empty placeholder an…

…d `valueContent`
taiga-family · Sep 20, 2024 · c94f39c · c94f39c
1 parent d4099d2
commit c94f39c
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/projects/legacy/components/input-tag/input-tag.component.ts b/projects/legacy/components/input-tag/input-tag.component.ts
@@ -113,6 +113,9 @@ export class TuiInputTagComponent
     @ContentChild(TuiDataListDirective, {read: TemplateRef})
     protected readonly datalist?: TemplateRef<TuiContext<TuiActiveZone>>;
 
+    @ContentChild('content')
+    protected readonly valueContent?: ElementRef<HTMLElement>;
+
     @ViewChild('errorIcon')
     protected readonly errorIconTemplate?: TemplateRef<Record<string, unknown>>;
 
@@ -219,6 +222,16 @@ export class TuiInputTagComponent
         return tuiIsNativeFocusedIn(this.el) || !!this.dropdown?.tuiDropdownOpen;
     }
 
+    public get tagsEmpty(): boolean {
+        return (
+            ((!this.focused || this.inputHidden) &&
+                !this.value.length &&
+                !this.search?.trim()?.length &&
+                !this.placeholder) ||
+            !!this.valueContent
+        );
+    }
+
     public onTagEdited(value: string, index: number): void {
         this.focusInput(value === '');
         this.value = this.filterValue(

diff --git a/projects/legacy/components/input-tag/input-tag.style.less b/projects/legacy/components/input-tag/input-tag.style.less
@@ -63,7 +63,7 @@
         overflow: hidden;
     }
 
-    &_empty:not(.t-with-placeholder) {
+    &_empty {
         block-size: 0;
     }
 

diff --git a/projects/legacy/components/input-tag/input-tag.template.html b/projects/legacy/components/input-tag/input-tag.template.html
@@ -47,8 +47,7 @@
                 >
                     <div
                         class="t-tags"
-                        [class.t-tags_empty]="(!focused || inputHidden) && !value.length && !search?.trim()?.length"
-                        [class.t-with-placeholder]="placeholder"
+                        [class.t-tags_empty]="tagsEmpty"
                     >
                         <ng-container *ngIf="labelOutside; else text">
                             <tui-tag

diff --git a/projects/legacy/components/multi-select/multi-select.template.html b/projects/legacy/components/multi-select/multi-select.template.html
@@ -50,6 +50,7 @@
 
         <div
             *ngIf="computedGroup"
+            #content
             ngProjectAs="tuiContent"
             class="t-content"
             [class.t-content_fullsize]="inputTag.labelOutside"