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 index d1b2a153d553..a5852ab3dd69 100644 --- 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 index 8ead6cfb6e10..68e907471134 100644 --- 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>; + @ContentChild(PolymorpheusOutletDirective) + readonly valueContent?: unknown; + @ViewChild('errorIcon') readonly errorIconTemplate?: TemplateRef>; @@ -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 index d25a73173210..4775d8624bad 100644 --- 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 index 734e0f2bed7a..8e8083108dec 100644 --- a/projects/kit/components/input-tag/input-tag.template.html +++ b/projects/kit/components/input-tag/input-tag.template.html @@ -47,8 +47,7 @@ >