diff --git a/projects/demo-playwright/tests/kit/combo-box/combobox.spec.ts b/projects/demo-playwright/tests/kit/combo-box/combobox.spec.ts new file mode 100644 index 000000000000..5136097be2c9 --- /dev/null +++ b/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`); + }); +}); diff --git a/projects/demo/src/modules/components/combo-box/combo-box.component.ts b/projects/demo/src/modules/components/combo-box/combo-box.component.ts index b4ee8da54775..abbd877de0c5 100644 --- a/projects/demo/src/modules/components/combo-box/combo-box.component.ts +++ b/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), diff --git a/projects/demo/src/modules/components/combo-box/combo-box.module.ts b/projects/demo/src/modules/components/combo-box/combo-box.module.ts index 781570650f50..b5134d1fd7d9 100644 --- a/projects/demo/src/modules/components/combo-box/combo-box.module.ts +++ b/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], diff --git a/projects/demo/src/modules/components/combo-box/combo-box.template.html b/projects/demo/src/modules/components/combo-box/combo-box.template.html index 4927265c5de9..ee4ebe7997af 100644 --- a/projects/demo/src/modules/components/combo-box/combo-box.template.html +++ b/projects/demo/src/modules/components/combo-box/combo-box.template.html @@ -89,6 +89,14 @@ > + + + + diff --git a/projects/demo/src/modules/components/combo-box/examples/7/index.html b/projects/demo/src/modules/components/combo-box/examples/7/index.html new file mode 100644 index 000000000000..7d11ea762179 --- /dev/null +++ b/projects/demo/src/modules/components/combo-box/examples/7/index.html @@ -0,0 +1,24 @@ + + Find the best employees + + + + + + + + +

Selected value: {{ value | json }}

diff --git a/projects/demo/src/modules/components/combo-box/examples/7/index.ts b/projects/demo/src/modules/components/combo-box/examples/7/index.ts new file mode 100644 index 000000000000..648072e39ad4 --- /dev/null +++ b/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}`; +} diff --git a/projects/kit/components/select-option/select-option.component.ts b/projects/kit/components/select-option/select-option.component.ts index 19798aff6109..9c544114ae29 100644 --- a/projects/kit/components/select-option/select-option.component.ts +++ b/projects/kit/components/select-option/select-option.component.ts @@ -77,7 +77,7 @@ export class TuiSelectOptionComponent 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); } });