fix(kit): don't allow disabled options to be selected (#5985)

Co-authored-by: taiga-family-bot <[email protected]>

projects/demo-playwright/tests/kit/combo-box/combobox.spec.ts

@@ -0,0 +1,27 @@
+import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
+import {expect, test} from '@playwright/test';
+
+const {describe} = test;
+
+describe(`ComboBox`, () => {
+    test(`Don't allow disabled options to be selected by typing them`, async ({page}) => {
+        await tuiGoto(page, `components/combo-box`);
+
+        const documentationPage = new TuiDocumentationPagePO(page);
+        const example = documentationPage.getExample(`#ignore-disabled`);
+        const input = example.locator(`tui-combo-box input[tuiTextfield]`);
+
+        await example.scrollIntoViewIfNeeded();
+        await input.click();
+        await expect(page).toHaveScreenshot(`01-combobox-dont-allow-disabled-01.png`);
+
+        await input.fill(`Graham Chapman`);
+        await expect(page).toHaveScreenshot(`01-combobox-dont-allow-disabled-02.png`);
+
+        await page.click(`body`);
+        await expect(page).toHaveScreenshot(`01-combobox-dont-allow-disabled-03.png`);
+
+        await input.click();
+        await expect(page).toHaveScreenshot(`01-combobox-dont-allow-disabled-04.png`);
+    });
+});

projects/demo/src/modules/components/combo-box/combo-box.component.ts

@@ -90,6 +90,11 @@ export class ExampleTuiComboBoxComponent extends AbstractExampleTuiControl {
         HTML: import('./examples/6/index.html?raw'),
     };
 
+    readonly example7: TuiDocExample = {
+        TypeScript: import('./examples/7/index.ts?raw'),
+        HTML: import('./examples/7/index.html?raw'),
+    };
+
     readonly items = [
         new Account('Rubles', 500),
         new Account('Dollars', 237),

projects/demo/src/modules/components/combo-box/combo-box.module.ts

@@ -39,6 +39,7 @@ import {TuiComboBoxExample4} from './examples/4';
 import {TuiComboBoxExample5} from './examples/5';
 import {IndexChangeDirective} from './examples/5/index-change.directive';
 import {TuiComboBoxExample6} from './examples/6';
+import {TuiComboBoxExample7} from './examples/7';
 
 @NgModule({
     imports: [
@@ -76,6 +77,7 @@ import {TuiComboBoxExample6} from './examples/6';
         TuiComboBoxExample4,
         TuiComboBoxExample5,
         TuiComboBoxExample6,
+        TuiComboBoxExample7,
         IndexChangeDirective,
     ],
     exports: [ExampleTuiComboBoxComponent],

projects/demo/src/modules/components/combo-box/combo-box.template.html

@@ -89,6 +89,14 @@
         >
             <tui-combo-box-example-6></tui-combo-box-example-6>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="ignore-disabled"
+            heading="Don't allow disabled options to be selected by typing them"
+            [content]="example7"
+        >
+            <tui-combo-box-example-7></tui-combo-box-example-7>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

projects/demo/src/modules/components/combo-box/examples/7/index.html

@@ -0,0 +1,24 @@
+<tui-combo-box
+    [stringify]="stringify"
+    [(ngModel)]="value"
+>
+    Find the best employees
+    <input
+        placeholder="Type a name"
+        tuiTextfield
+    />
+    <ng-container *tuiDataList>
+        <tui-data-list>
+            <button
+                *ngFor="let item of items | tuiFilterByInputWith: stringify"
+                tuiOption
+                [disabled]="item.disabled"
+                [value]="item"
+            >
+                {{ stringify(item) }}
+            </button>
+        </tui-data-list>
+    </ng-container>
+</tui-combo-box>
+
+<p class="tui-space_top-2">Selected value: {{ value | json }}</p>

projects/demo/src/modules/components/combo-box/examples/7/index.ts

@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: 'tui-combo-box-example-7',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiComboBoxExample7 {
+    value = null;
+
+    readonly items = [
+        {name: 'John', surname: 'Cleese', disabled: false},
+        {name: 'Eric', surname: 'Idle', disabled: false},
+        {name: 'Graham', surname: 'Chapman', disabled: true},
+        {name: 'Michael', surname: 'Palin', disabled: true},
+        {name: 'Terry', surname: 'Gilliam', disabled: false},
+        {name: 'Terry', surname: 'Jones', disabled: false},
+    ];
+
+    readonly stringify = (item: {name: string; surname: string}): string =>
+        `${item.name} ${item.surname}`;
+}

projects/kit/components/select-option/select-option.component.ts

@@ -77,7 +77,7 @@ export class TuiSelectOptionComponent<T> implements OnInit, DoCheck {
          * Microtask keeps it in the same frame but allows change detection to run.
          */
         void Promise.resolve().then(() => {
-            if (tuiIsPresent(this.option.value)) {
+            if (tuiIsPresent(this.option.value) && !this.option.disabled) {
                 this.host.checkOption?.(this.option.value);
             }
         });