fix(kit): MultiSelect empty line when non empty placeholder and `…

…valueContent`
taiga-family · Sep 22, 2024 · a435702 · a435702
1 parent 98e0509
commit a435702
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 4 deletions.
diff --git a/projects/demo-playwright/tests/kit/multi-select/multi-select.spec.ts b/projects/demo-playwright/tests/kit/multi-select/multi-select.spec.ts
@@ -217,5 +217,25 @@ describe('MultiSelect', () => {
 
             await expect(page).toHaveScreenshot('09-multi-select-non-editable.png');
         });
+
+        test('placeholder with value content', async ({page}) => {
+            await tuiGoto(
+                page,
+                'components/multi-select/API?valueContent$=1&placeholder=test',
+            );
+
+            await multiSelect.arrow.click();
+
+            await multiSelect.selectOptions([0]);
+            await multiSelect.closeDropdown();
+
+            await multiSelect.textfield.blur();
+
+            await documentationPage.prepareApiPageBeforeScreenshot();
+
+            await expect(page).toHaveScreenshot(
+                '10-multi-select-placeholder-with-value-content.png',
+            );
+        });
     });
 });
diff --git a/projects/kit/components/input-tag/input-tag.component.ts b/projects/kit/components/input-tag/input-tag.component.ts
@@ -58,7 +58,7 @@ import {
 import {TuiStringifiableItem} from '@taiga-ui/kit/classes';
 import {FIXED_DROPDOWN_CONTROLLER_PROVIDER} from '@taiga-ui/kit/providers';
 import {TuiStatus} from '@taiga-ui/kit/types';
-import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+import {PolymorpheusContent, PolymorpheusOutletDirective} from '@tinkoff/ng-polymorpheus';
 import {Observable, timer} from 'rxjs';
 import {map, takeUntil} from 'rxjs/operators';
 
@@ -171,6 +171,9 @@ export class TuiInputTagComponent
     @ContentChild(TuiDataListDirective, {read: TemplateRef})
     readonly datalist?: TemplateRef<TuiContextWithImplicit<TuiActiveZoneDirective>>;
 
+    @ContentChild(PolymorpheusOutletDirective, {read: ElementRef})
+    readonly valueContent?: ElementRef<HTMLSpanElement>;
+
     @ViewChild('errorIcon')
     readonly errorIconTemplate?: TemplateRef<Record<string, unknown>>;
 
@@ -305,6 +308,16 @@ export class TuiInputTagComponent
         return this.expandable ? this.rows * this.lineHeight : null;
     }
 
+    get tagsEmpty(): boolean {
+        return (
+            ((!this.focused || this.inputHidden) &&
+                !this.value.length &&
+                !this.search?.trim()?.length &&
+                !this.placeholder) ||
+            !!this.valueContent
+        );
+    }
+
     @HostListener('focusin.capture.silent')
     @HostListener('focusout.capture.silent')
     onFocusInOut(): void {

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

diff --git a/projects/kit/components/input-tag/input-tag.template.html b/projects/kit/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