fix(kit): MultiSelect fix incorrect height with multiline value con…

…tent (#5618)
taiga-family · Oct 16, 2023 · 5c41e09 · 5c41e09
1 parent ca941e2
commit 5c41e09
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 9 deletions.
diff --git a/projects/demo-cypress/cypress/tests/kit/input-tag/input-tag.cy.ts b/projects/demo-cypress/cypress/tests/kit/input-tag/input-tag.cy.ts
@@ -9,7 +9,7 @@ describe(`InputTag`, () => {
 
         cy.get(`@wrapper`)
             .findByAutomationId(`tui-input-tag__native`)
-            .type(`Very looooooooooooooooooooooooong Text{enter}`);
+            .type(`Very looooooooooooooooooooooooong Text{enter}`, {force: true});
 
         cy.get(`@wrapper`)
             .tuiWaitBeforeScreenshot()

diff --git a/projects/demo/src/modules/components/multi-select/examples/11/index.html b/projects/demo/src/modules/components/multi-select/examples/11/index.html
@@ -0,0 +1,41 @@
+<tui-multi-select
+    [tuiTextfieldLabelOutside]="true"
+    [valueContent]="valueContent"
+    [(ngModel)]="value"
+>
+    <tui-data-list-wrapper
+        *tuiDataList
+        tuiMultiSelectGroup
+        [items]="items"
+    ></tui-data-list-wrapper>
+</tui-multi-select>
+
+<tui-multi-select
+    class="tui-space_top-4"
+    [valueContent]="content"
+    [(ngModel)]="value"
+>
+    Select
+    <tui-data-list-wrapper
+        *tuiDataList
+        tuiMultiSelectGroup
+        [items]="items"
+    ></tui-data-list-wrapper>
+</tui-multi-select>
+
+<ng-template
+    #valueContent
+    let-list
+>
+    <div class="t-wrapper">
+        <ng-container *ngFor="let item of list">
+            <tui-tag
+                size="l"
+                class="t-tag"
+                [removable]="true"
+                [value]="item"
+                (edited)="remove(item)"
+            ></tui-tag>
+        </ng-container>
+    </div>
+</ng-template>
diff --git a/projects/demo/src/modules/components/multi-select/examples/11/index.less b/projects/demo/src/modules/components/multi-select/examples/11/index.less
@@ -0,0 +1,8 @@
+.t-tag {
+    margin: 0.125rem 0.5rem 0.125rem -0.25rem;
+}
+
+.t-wrapper {
+    flex-wrap: wrap;
+    padding-inline-start: 0.25rem;
+}
diff --git a/projects/demo/src/modules/components/multi-select/examples/11/index.ts b/projects/demo/src/modules/components/multi-select/examples/11/index.ts
@@ -0,0 +1,33 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiContextWithImplicit} from '@taiga-ui/cdk';
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
+
+@Component({
+    selector: 'tui-multi-select-example-11',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    changeDetection,
+    encapsulation,
+})
+export class TuiMultiSelectExample11 {
+    readonly items = [
+        'Luke Skywalker',
+        'Leia Organa Solo',
+        'Darth Vader',
+        'Han Solo',
+        'Obi-Wan Kenobi',
+        'Yoda',
+    ];
+
+    value: string[] = this.items;
+
+    content: PolymorpheusContent<TuiContextWithImplicit<string[]>> = ({
+        $implicit: {length},
+    }) => `Selected: ${length}`;
+
+    remove(item: string): void {
+        this.value = this.value.filter(val => val !== item);
+    }
+}
diff --git a/projects/demo/src/modules/components/multi-select/multi-select.component.ts b/projects/demo/src/modules/components/multi-select/multi-select.component.ts
@@ -104,6 +104,11 @@ export class ExampleTuiMultiSelectComponent extends AbstractExampleTuiControl {
         HTML: import('./examples/10/index.html?raw'),
     };
 
+    readonly example11: TuiDocExample = {
+        TypeScript: import('./examples/11/index.ts?raw'),
+        HTML: import('./examples/11/index.html?raw'),
+    };
+
     override labelOutside = true;
 
     readonly items = [

diff --git a/projects/demo/src/modules/components/multi-select/multi-select.module.ts b/projects/demo/src/modules/components/multi-select/multi-select.module.ts
@@ -20,6 +20,7 @@ import {
     TuiDataListWrapperModule,
     TuiMultiSelectModule,
     TuiRadioListModule,
+    TuiTagModule,
 } from '@taiga-ui/kit';
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
@@ -34,6 +35,7 @@ import {TuiMultiSelectExample7} from './examples/7';
 import {TuiMultiSelectExample8} from './examples/8';
 import {TuiMultiSelectExample9} from './examples/9';
 import {TuiMultiSelectExample10} from './examples/10';
+import {TuiMultiSelectExample11} from './examples/11';
 import {ExampleTuiMultiSelectComponent} from './multi-select.component';
 
 @NgModule({
@@ -53,6 +55,7 @@ import {ExampleTuiMultiSelectComponent} from './multi-select.component';
         TuiLetModule,
         TuiDropdownModule,
         TuiHintModule,
+        TuiTagModule,
         TuiTextfieldControllerModule,
         InheritedDocumentationModule,
         TuiAddonDocModule,
@@ -72,6 +75,7 @@ import {ExampleTuiMultiSelectComponent} from './multi-select.component';
         TuiMultiSelectExample8,
         TuiMultiSelectExample9,
         TuiMultiSelectExample10,
+        TuiMultiSelectExample11,
     ],
     exports: [ExampleTuiMultiSelectComponent],
 })

diff --git a/projects/demo/src/modules/components/multi-select/multi-select.template.html b/projects/demo/src/modules/components/multi-select/multi-select.template.html
@@ -105,6 +105,14 @@
         >
             <tui-multi-select-example-10></tui-multi-select-example-10>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="value-content"
+            heading="Value content"
+            [content]="example11"
+        >
+            <tui-multi-select-example-11></tui-multi-select-example-11>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

diff --git a/projects/kit/components/input-tag/input-tag.style.less b/projects/kit/components/input-tag/input-tag.style.less
@@ -62,6 +62,10 @@
         overflow: hidden;
     }
 
+    &_empty {
+        height: 0;
+    }
+
     :host._expandable & {
         flex-wrap: wrap;
         white-space: normal;
@@ -189,14 +193,18 @@
 }
 
 .t-input-wrapper {
-    position: relative;
-    flex: 1;
-    max-width: 100%;
-
     &_collapsed {
         flex: 0;
         margin-inline-start: -0.5rem;
     }
+}
+
+.t-input-wrapper,
+.t-value-content {
+    position: relative;
+    display: flex;
+    flex: 1;
+    max-width: 100%;
 
     :host[data-size='s'] & {
         min-height: 1.25rem + 2 * @tag-vertical-space;
@@ -215,6 +223,10 @@
     }
 }
 
+.t-value-content:empty {
+    display: none;
+}
+
 .t-ghost {
     visibility: hidden;
     white-space: pre;

diff --git a/projects/kit/components/input-tag/input-tag.template.html b/projects/kit/components/input-tag/input-tag.template.html
@@ -45,7 +45,10 @@
                     [hidden]="!expandable"
                     [style.maxHeight.rem]="computeMaxHeight"
                 >
-                    <div class="t-tags">
+                    <div
+                        class="t-tags"
+                        [class.t-tags_empty]="!focused && !value?.length"
+                    >
                         <ng-container *ngIf="labelOutside; else text">
                             <tui-tag
                                 *ngFor="let item of value; index as index; trackBy: trackByFn"
@@ -105,8 +108,10 @@
                             />
                         </div>
                     </div>
+                    <div class="t-value-content">
+                        <ng-content select="tuiContent"></ng-content>
+                    </div>
                 </tui-scrollbar>
-                <ng-content select="tuiContent"></ng-content>
             </div>
             <ng-content select="select"></ng-content>
             <div

diff --git a/projects/kit/components/multi-select/multi-select.style.less b/projects/kit/components/multi-select/multi-select.style.less
@@ -24,8 +24,6 @@
 }
 
 .t-content {
-    .fullsize(absolute, inset);
-    top: 38%;
     display: flex;
     align-items: center;
     pointer-events: none;