fix(legacy): MultiSelect fix for long items overflowing (#9160)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Sep 24, 2024 · 80fdfd0 · 80fdfd0
1 parent 8e513a2
commit 80fdfd0
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 104 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
@@ -14,7 +14,7 @@ test.describe('MultiSelect', () => {
         });
 
         test('does not overflow arrow icon by many tags', async () => {
-            const example = documentationPage.getExample('#object-array');
+            const example = documentationPage.getExample('#objects-array');
             const multiSelect = new TuiMultiSelectPO(example.locator('tui-multi-select'));
 
             await multiSelect.textfield.click();
@@ -67,9 +67,7 @@ test.describe('MultiSelect', () => {
                 test(`multiselect inside dialog with tuiTextfieldSize=${size}`, async ({
                     page,
                 }) => {
-                    const example = documentationPage.getExample(
-                        '#multiselect-inside-dialog-with-different-size',
-                    );
+                    const example = documentationPage.getExample('#inside-dialog');
 
                     await example.getByRole('button').nth(index).click();
 

diff --git a/projects/demo/src/modules/components/multi-select/examples/13/index.html b/projects/demo/src/modules/components/multi-select/examples/13/index.html
@@ -0,0 +1,45 @@
+<tui-multi-select [(ngModel)]="value">
+    Multiple lines
+    <tui-data-list-wrapper
+        *tuiDataList
+        tuiMultiSelectGroup
+        [items]="items"
+    />
+</tui-multi-select>
+<p>
+    <tui-multi-select [(ngModel)]="value">
+        Scrollable with fade
+        <tui-data-list-wrapper
+            *tuiDataList
+            tuiMultiSelectGroup
+            [itemContent]="fade"
+            [items]="items"
+        />
+        <ng-template
+            #fade
+            let-item
+        >
+            <div
+                tuiFade
+                class="fade"
+            >
+                {{ item }}
+            </div>
+        </ng-template>
+    </tui-multi-select>
+</p>
+<tui-multi-select [(ngModel)]="value">
+    Ellipsis
+    <tui-data-list-wrapper
+        *tuiDataList
+        tuiMultiSelectGroup
+        [itemContent]="ellipsis"
+        [items]="items"
+    />
+    <ng-template
+        #ellipsis
+        let-item
+    >
+        <div class="ellipsis">{{ item }}</div>
+    </ng-template>
+</tui-multi-select>
diff --git a/projects/demo/src/modules/components/multi-select/examples/13/index.less b/projects/demo/src/modules/components/multi-select/examples/13/index.less
@@ -0,0 +1,9 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+.fade {
+    white-space: nowrap;
+}
+
+.ellipsis {
+    .text-overflow();
+}
diff --git a/projects/demo/src/modules/components/multi-select/examples/13/index.ts b/projects/demo/src/modules/components/multi-select/examples/13/index.ts
@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDataListWrapper, TuiFade} from '@taiga-ui/kit';
+import {TuiMultiSelectModule} from '@taiga-ui/legacy';
+
+@Component({
+    standalone: true,
+    imports: [FormsModule, TuiDataListWrapper, TuiFade, TuiMultiSelectModule],
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly items: readonly string[] = [
+        'I am a very very long item that definitely overflows',
+    ];
+
+    protected value: readonly string[] = [];
+}
diff --git a/projects/demo/src/modules/components/multi-select/index.html b/projects/demo/src/modules/components/multi-select/index.html
@@ -10,105 +10,11 @@
         </div>
 
         <tui-doc-example
-            id="string-array"
-            heading="String array"
-            [component]="1 | tuiComponent"
-            [content]="1 | tuiExample: 'html,ts'"
-        />
-
-        <tui-doc-example
-            id="object-array"
-            heading="Custom template, async items loading"
-            [component]="2 | tuiComponent"
-            [content]="2 | tuiExample"
-        />
-
-        <tui-doc-example
-            id="sizes"
-            heading="sizes"
-            [component]="3 | tuiComponent"
-            [content]="3 | tuiExample: 'html,ts'"
-        />
-
-        <tui-doc-example
-            id="ids"
-            heading="With IDs"
-            [component]="4 | tuiComponent"
-            [content]="4 | tuiExample: 'html,ts'"
-        />
-
-        <tui-doc-example
-            id="datalist"
-            heading="DataList"
-            [component]="5 | tuiComponent"
-            [content]="5 | tuiExample: 'html,ts'"
-        />
-
-        <tui-doc-example
-            id="rtl"
-            heading="Direction: RTL"
-            [component]="6 | tuiComponent"
-            [content]="6 | tuiExample"
-        />
-
-        <tui-doc-example
-            id="virtual"
-            heading="Virtual scroll"
-            [component]="7 | tuiComponent"
-            [content]="7 | tuiExample"
-            [description]="cdkVirtualScrollDescription"
-        >
-            <ng-template #cdkVirtualScrollDescription>
-                You can use
-                <code>MultiSelect</code>
-                with
-                <code>ScrollingModule</code>
-                from
-                <a
-                    href="https://material.angular.io/cdk/scrolling/overview"
-                    rel="noreferrer"
-                    target="_blank"
-                    tuiLink
-                >
-                    &#64;angular/cdk/scrolling
-                </a>
-                .
-            </ng-template>
-        </tui-doc-example>
-
-        <tui-doc-example
-            id="options-stringify"
-            heading="Options (stringify)"
-            [component]="8 | tuiComponent"
-            [content]="8 | tuiExample: 'html,ts'"
-        />
-
-        <tui-doc-example
-            id="multiselect-inside-dialog-with-different-size"
-            heading="Multiselect inside dialog with different textfield sizes"
-            [component]="9 | tuiComponent"
-            [content]="9 | tuiExample: 'html,ts'"
-        />
-
-        <tui-doc-example
-            id="native-select"
-            heading="Native select"
-            [component]="10 | tuiComponent"
-            [content]="10 | tuiExample: 'html,ts'"
-        />
-
-        <tui-doc-example
-            id="value-content"
-            heading="Value content"
-            [component]="11 | tuiComponent"
-            [content]="11 | tuiExample"
-        />
-
-        <tui-doc-example
-            id="nested-datalist"
-            heading="Nested datalist"
-            [component]="12 | tuiComponent"
-            [content]="12 | tuiExample: 'html,ts'"
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [heading]="example"
+            [id]="example | tuiKebab"
         />
     </ng-template>
 

diff --git a/projects/demo/src/modules/components/multi-select/index.ts b/projects/demo/src/modules/components/multi-select/index.ts
@@ -60,6 +60,22 @@ class Account {
     ],
 })
 export default class PageComponent extends AbstractExampleTuiControl {
+    protected readonly examples = [
+        'Strings array',
+        'Objects array',
+        'Sizes',
+        'With IDs',
+        'Datalist',
+        'Direction: RTL',
+        'Virtual scroll',
+        'Options (stringify)',
+        'Inside dialog',
+        'Native select',
+        'Value content',
+        'Nested datalist',
+        'Long items',
+    ];
+
     protected readonly items = [
         new Account('Ruble', 500),
         new Account('Dollar', 500),

diff --git a/projects/demo/src/utils/example.pipe.ts b/projects/demo/src/utils/example.pipe.ts
@@ -28,7 +28,7 @@ export class TuiExamplePipe implements PipeTransform {
                     format === 'ts' ? 'TypeScript' : format.toUpperCase(),
                     import(
                         `../modules/${this.page.type}/${toKebab(this.page.header)}/examples/${index}/index.${format}?raw`
-                    ),
+                    ).catch(() => ({default: ''})),
                 ]),
         );
     }

diff --git a/projects/kit/components/data-list-wrapper/data-list-wrapper.style.less b/projects/kit/components/data-list-wrapper/data-list-wrapper.style.less
@@ -4,6 +4,7 @@
 
 .t-content {
     flex: 1;
+    min-inline-size: 0;
 }
 
 .t-loader {

diff --git a/projects/legacy/components/multi-select-option/multi-select-option.style.less b/projects/legacy/components/multi-select-option/multi-select-option.style.less
@@ -14,6 +14,7 @@
     flex: 1;
     align-items: center;
     animation: retrigger 1s;
+    overflow: hidden;
 }
 
 .t-checkbox {
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,7 +28,7 @@ export class TuiExamplePipe implements PipeTransform { @@
                         format === 'ts' ? 'TypeScript' : format.toUpperCase(),
                         import(
                             `../modules/${this.page.type}/${toKebab(this.page.header)}/examples/${index}/index.${format}?raw`
-                        ),
+                        ).catch(() => ({default: ''})),
                     ]),
             );
         }
@@ Expand Down @@