fix(kit): support updateOn of blur and submit types for `multi-…

…select` component

projects/core/interfaces/data-list-host.ts

@@ -1,7 +1,12 @@
-import {TuiIdentityMatcher} from '@taiga-ui/cdk';
+import {
+    AbstractTuiControl,
+    AbstractTuiInteractive,
+    TuiIdentityMatcher,
+} from '@taiga-ui/cdk';
 
 // TODO: Consider refactoring checkOption, it is only needed in ComboBox
-export interface TuiDataListHost<T> {
+export interface TuiDataListHost<T, K = AbstractTuiControl<T> | AbstractTuiInteractive> {
+    hostControl?: K;
     handleOption(option: T): void;
     checkOption?(option: T): void;
     readonly identityMatcher?: TuiIdentityMatcher<T>;

projects/demo-integrations/cypress/tests/desktop/kit/multi-select/multi-select.cy.ts

@@ -51,27 +51,106 @@ describe(`MultiSelect`, () => {
     });
 
     describe(`API page`, () => {
-        beforeEach(() => cy.viewport(400, 812));
+        describe(`sizes`, () => {
+            beforeEach(() => cy.viewport(400, 812));
+
+            [`s`, `m`, `l`].forEach(size => {
+                it(`tuiTextfieldSize=${size}`, () => {
+                    cy.tuiVisit(
+                        `components/multi-select/API?tuiMode=null&tuiTextfieldCleaner=true&tuiTextfieldSize=${size}`,
+                    );
+
+                    cy.getByAutomationId(`tui-multi-select__arrow`).click({force: true});
+
+                    [0, 1, 2, 3, 4].forEach(index => {
+                        cy.get(`tui-data-list-wrapper`)
+                            .findByAutomationId(`tui-data-list-wrapper__option`)
+                            .eq(index)
+                            .click({force: true});
+                    });
+
+                    cy.wait(DEFAULT_TIMEOUT_BEFORE_ACTION).matchImageSnapshot(
+                        `02-multi-select-size-${size}`,
+                        {capture: `viewport`},
+                    );
+                });
+            });
+        });
 
-        [`s`, `m`, `l`].forEach(size => {
-            it(`tuiTextfieldSize=${size}`, () => {
-                cy.tuiVisit(
-                    `components/multi-select/API?tuiMode=null&tuiTextfieldCleaner=true&tuiTextfieldSize=${size}`,
-                );
+        describe(`Form changes by updateOn`, () => {
+            [`submit`, `blur`, `change`].forEach(type => {
+                it(`updateOn: ${type}`, () => {
+                    cy.tuiVisit(`components/multi-select/API`);
 
-                cy.getByAutomationId(`tui-multi-select__arrow`).click({force: true});
+                    cy.getByAutomationId(`tui-demo-button__toggle-details`)
+                        .click()
+                        .wait(100);
 
-                [0, 1, 2, 3, 4].forEach(index => {
-                    cy.get(`tui-data-list-wrapper`)
-                        .findByAutomationId(`tui-data-list-wrapper__option`)
-                        .eq(index)
+                    cy.getByAutomationId(`tui-demo-select__expand-update-on`)
+                        .click()
+                        .wait(100);
+
+                    cy.get(`tui-data-list[role=listbox]`)
+                        .find(`button`)
+                        .contains(type)
                         .click({force: true});
-                });
 
-                cy.wait(DEFAULT_TIMEOUT_BEFORE_ACTION).matchImageSnapshot(
-                    `02-multi-select-size-${size}`,
-                    {capture: `viewport`},
-                );
+                    cy.get(`#demo-content`)
+                        .wait(DEFAULT_TIMEOUT_BEFORE_ACTION)
+                        .matchImageSnapshot(
+                            // initial
+                            `multi-select-update-on-${type}__1`,
+                        );
+                    cy.getByAutomationId(`tui-multi-select__arrow`).click();
+
+                    [0, 1, 2].forEach(index =>
+                        cy
+                            .get(`tui-data-list-wrapper`)
+                            .findByAutomationId(`tui-data-list-wrapper__option`)
+                            .eq(index)
+                            .click({force: true}),
+                    );
+                    cy.get(`tui-data-list-wrapper`).matchImageSnapshot(
+                        // selected-values
+                        `multi-select-update-on-${type}__2`,
+                    );
+
+                    cy.getByAutomationId(`tui-multi-select__arrow`).click({force: true});
+                    cy.get(`#demo-content`)
+                        .wait(DEFAULT_TIMEOUT_BEFORE_ACTION)
+                        .matchImageSnapshot(
+                            // hide-dropdown
+                            `multi-select-update-on-${type}__3`,
+                        );
+
+                    cy.get(`#demo-content`).click({force: true});
+                    cy.get(`#demo-content`)
+                        .wait(DEFAULT_TIMEOUT_BEFORE_ACTION)
+                        .matchImageSnapshot(
+                            // blur event
+                            `multi-select-update-on-${type}__4`,
+                        );
+
+                    cy.getByAutomationId(`tui-demo-button__submit-state`).click({
+                        force: true,
+                    });
+                    cy.get(`#demo-content`)
+                        .wait(DEFAULT_TIMEOUT_BEFORE_ACTION)
+                        .matchImageSnapshot(
+                            // submit event
+                            `multi-select-update-on-${type}__5`,
+                        );
+
+                    cy.getByAutomationId(`tui-demo-button__reset-state`).click({
+                        force: true,
+                    });
+                    cy.get(`#demo-content`)
+                        .wait(DEFAULT_TIMEOUT_BEFORE_ACTION)
+                        .matchImageSnapshot(
+                            // reset
+                            `multi-select-update-on-${type}__6`,
+                        );
+                });
             });
         });
     });

projects/kit/components/combo-box/combo-box.component.ts

@@ -70,7 +70,7 @@ export class TuiComboBoxComponent<T>
     private readonly hostedDropdown?: TuiHostedDropdownComponent;
 
     @ViewChild(TuiPrimitiveTextfieldComponent)
-    private readonly textfield?: TuiPrimitiveTextfieldComponent;
+    readonly hostControl?: TuiPrimitiveTextfieldComponent;
 
     @Input()
     @tuiDefaultProp()
@@ -128,7 +128,7 @@ export class TuiComboBoxComponent<T>
     }
 
     get nativeFocusableElement(): HTMLInputElement | null {
-        return this.textfield ? this.textfield.nativeFocusableElement : null;
+        return this.hostControl?.nativeFocusableElement ?? null;
     }
 
     get focused(): boolean {

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

@@ -1,6 +1,7 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {tuiIsPresent} from '@taiga-ui/cdk';
 import {TuiSizeL} from '@taiga-ui/core';
+import type {TuiStringifiableItem} from '@taiga-ui/kit/classes';
 import {TuiSelectOptionComponent} from '@taiga-ui/kit/components/select-option';
 
 @Component({
@@ -22,8 +23,15 @@ export class TuiMultiSelectOptionComponent<T> extends TuiSelectOptionComponent<T
 
         return (
             tuiIsPresent(value) &&
-            tuiIsPresent(this.control.value) &&
-            this.control.value.some((item: T) => this.matcher(item, value))
+            ((this.control.value ?? []).some((item: T) => this.matcher(item, value)) ||
+                /**
+                 * @description:
+                 * if host has updateOn type in form by values as 'blur' | 'submit'
+                 * then we can't listen changes directly in this.control.value
+                 */
+                (this.host.hostControl?.control?.value ?? []).some(
+                    ({item}: TuiStringifiableItem<T>) => this.matcher(item, value),
+                ))
         );
     }
 }

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

@@ -78,7 +78,7 @@ export class TuiMultiSelectComponent<T>
     private readonly hostedDropdown?: TuiHostedDropdownComponent;
 
     @ViewChild(TuiInputTagComponent)
-    private readonly input?: TuiInputTagComponent;
+    readonly hostControl?: TuiInputTagComponent;
 
     @Input()
     @tuiDefaultProp()
@@ -158,14 +158,11 @@ export class TuiMultiSelectComponent<T>
     }
 
     get nativeFocusableElement(): HTMLInputElement | null {
-        return this.input ? this.input.nativeFocusableElement : null;
+        return this.hostControl?.nativeFocusableElement ?? null;
     }
 
     get focused(): boolean {
-        return (
-            (!!this.input && this.input.focused) ||
-            (!!this.hostedDropdown && this.hostedDropdown.focused)
-        );
+        return !!this.hostControl?.focused || !!this.hostedDropdown?.focused;
     }
 
     get computedValue(): readonly T[] {

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

@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 import {NgControl} from '@angular/forms';
 import {
+    AbstractTuiMultipleControl,
     TUI_DEFAULT_IDENTITY_MATCHER,
     TuiContextWithImplicit,
     TuiIdentityMatcher,
@@ -34,6 +35,7 @@ import {distinctUntilChanged, map, startWith} from 'rxjs/operators';
 export class TuiSelectOptionComponent<T> implements OnInit {
     readonly selected$ = merge(
         this.control.valueChanges || EMPTY,
+        this.host?.hostControl?.control?.valueChanges ?? EMPTY,
         tuiTypedFromEvent(this.elementRef.nativeElement, 'animationstart'),
     ).pipe(
         startWith(null),
@@ -45,7 +47,7 @@ export class TuiSelectOptionComponent<T> implements OnInit {
         @Inject(POLYMORPHEUS_CONTEXT)
         readonly context: TuiContextWithImplicit<TemplateRef<Record<string, unknown>>>,
         @Inject(TUI_DATA_LIST_HOST)
-        private readonly host: TuiDataListHost<T>,
+        protected readonly host: TuiDataListHost<T, AbstractTuiMultipleControl<string>>,
         @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,
         @Inject(TuiOptionComponent) protected readonly option: TuiOptionComponent<T>,
         @Optional()