fix(platform): multi-combobox, fix selection in mobile mode (#7483)

* fix(platform): multi-combobox, fix selection in mobile mode

* fix(platform): multi-combobox, add states support

* fix(platform): minor fixes of selection and unit tests

* fix(platform): fix conflicts

* fix(platform): fix failed e2e test

* fix(platform): fix e2e

Co-authored-by: Evgeny Beregovoy <evgeny.beregovoy@valor-software.com>

apps/docs/src/app/platform/component-docs/platform-multi-combobox/examples/multi-combobox-datasource/multi-combobox-datasource-example.component.html

@@ -54,7 +54,7 @@
     </fdp-form-field>
 </fdp-form-group>
 
-<fdp-form-group [noLabelLayout]="false" columnLayout="XL3-L2-M1-S1">
+<fdp-form-group [noLabelLayout]="false" columnLayout="XL1-L2-M1-S1">
     <fdp-form-field id="standard" label="Example with 'N more' label" [column]="1">
         <fdp-multi-combobox
             name="standard"

apps/docs/src/app/platform/component-docs/platform-multi-combobox/examples/multi-combobox-states/multi-combobox-states-example.component.html

@@ -0,0 +1,68 @@
+<fdp-form-group [noLabelLayout]="false" mainTitle="Playground" columnLayout="XL2-L2-M1-S1">
+    <fdp-form-field id="multi-combobox-states" label="Select state" column="1">
+        <fdp-combobox
+            name="multi-combobox-states"
+            placeholder="Select state"
+            [dataSource]="states"
+            [value]="selectedState"
+            (selectionChange)="onSelectState($event)"
+        ></fdp-combobox>
+    </fdp-form-field>
+    <fdp-form-field id="multi-combobox-state-1" label="Selected state" column="2">
+        <fdp-multi-combobox
+            name="multi-combobox-state-1"
+            placeholder="Type some text..."
+            displayKey="name"
+            [state]="selectedState?.toLowerCase()"
+            [stateMessage]="selectedState + ' state message'"
+            [dataSource]="dataSource"
+        >
+        </fdp-multi-combobox>
+    </fdp-form-field>
+</fdp-form-group>
+
+<fdp-form-group mainTitle="States" columnLayout="XL2-L2-M1-S1">
+    <fdp-form-field id="multi-combobox-state-success" label="Success state" column="1">
+        <fdp-multi-combobox
+            name="multi-combobox-state-success"
+            placeholder="Type some text..."
+            state="success"
+            stateMessage="Success state message"
+            displayKey="name"
+            [dataSource]="dataSource"
+        ></fdp-multi-combobox>
+    </fdp-form-field>
+
+    <fdp-form-field id="multi-combobox-state-error" label="Error state" column="2">
+        <fdp-multi-combobox
+            name="multi-combobox-error-state"
+            placeholder="Type some text..."
+            state="error"
+            stateMessage="Error state message"
+            displayKey="name"
+            [dataSource]="dataSource"
+        ></fdp-multi-combobox>
+    </fdp-form-field>
+
+    <fdp-form-field id="multi-combobox-state-warning" label="Warning state" column="1">
+        <fdp-multi-combobox
+            name="multi-combobox-warning-state"
+            placeholder="Type some text..."
+            state="warning"
+            stateMessage="Warning state message"
+            displayKey="name"
+            [dataSource]="dataSource"
+        ></fdp-multi-combobox>
+    </fdp-form-field>
+
+    <fdp-form-field id="multi-combobox-state-info" label="Information state" column="2">
+        <fdp-multi-combobox
+            name="multi-combobox-information-state"
+            placeholder="Type some text..."
+            state="information"
+            stateMessage="Information state message"
+            displayKey="name"
+            [dataSource]="dataSource"
+        ></fdp-multi-combobox>
+    </fdp-form-field>
+</fdp-form-group>

apps/docs/src/app/platform/component-docs/platform-multi-combobox/examples/multi-combobox-states/multi-combobox-states-example.component.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { ComboboxSelectionChangeEvent } from '@fundamental-ngx/platform/form';
+
+import { DATA_PROVIDERS } from '@fundamental-ngx/platform/shared';
+
+@Component({
+    selector: 'fdp-multi-combobox-states-example',
+    templateUrl: './multi-combobox-states-example.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    providers: [{ provide: DATA_PROVIDERS, useValue: new Map() }],
+    styles: [
+        `
+            fdp-form-group .fd-row__form-item > .fd-col:first-child {
+                margin-bottom: 1rem;
+            }
+        `
+    ]
+})
+export class MultiComboboxStatesExampleComponent {
+    dataSource = [
+        { name: 'Apple' },
+        { name: 'Banana' },
+        { name: 'Pineapple' },
+        { name: 'Strawberry' },
+        { name: 'Broccoli' },
+        { name: 'Carrot' },
+        { name: 'Jalapeño' },
+        { name: 'Spinach' }
+    ];
+
+    states = ['Default', 'Success', 'Error', 'Warning', 'Information'];
+    selectedState = this.states[0];
+
+    onSelectState(item: ComboboxSelectionChangeEvent): void {
+        this.selectedState = item.payload;
+    }
+}

apps/docs/src/app/platform/component-docs/platform-multi-combobox/platform-multi-combobox-docs.component.html

@@ -61,6 +61,20 @@
 
 <separator></separator>
 
+<fd-docs-section-title id="states" componentName="multi-combobox"> Multi Combobox states. </fd-docs-section-title>
+<description>
+    The Multi Combobox component with states.
+    <ul>
+        <li>Set <code>[state]</code>property to: <code>'success' | 'error' | 'warning' | 'information'</code></li>
+    </ul>
+</description>
+<component-example>
+    <fdp-multi-combobox-states-example></fdp-multi-combobox-states-example>
+</component-example>
+<code-example [exampleFiles]="multiComboboxStatesExample"></code-example>
+
+<separator></separator>
+
 <fd-docs-section-title id="reactive-form" componentName="multi-combobox"> Reactive Form </fd-docs-section-title>
 <description> The Multi-Combobox component may also be used within Angular Reactive Forms. </description>
 <component-example>

apps/docs/src/app/platform/component-docs/platform-multi-combobox/platform-multi-combobox-docs.component.ts

@@ -12,6 +12,8 @@ import multiComboboxGroupHtml from '!./examples/multi-combobox-group/multi-combo
 import multiComboboxGroupTs from '!./examples/multi-combobox-group/multi-combobox-group-example.component?raw';
 import multiComboboxColumnsHtml from '!./examples/multi-combobox-columns/multi-combobox-columns-example.component.html?raw';
 import multiComboboxColumnsTs from '!./examples/multi-combobox-columns/multi-combobox-columns-example.component?raw';
+import multiComboboxStatesHtml from '!./examples/multi-combobox-states/multi-combobox-states-example.component.html?raw';
+import multiComboboxStatesTs from '!./examples/multi-combobox-states/multi-combobox-states-example.component?raw';
 import multiComboboxLoadingHtml from '!./examples/multi-combobox-loading/multi-combobox-loading-example.component.html?raw';
 import multiComboboxLoadingTs from '!./examples/multi-combobox-loading/multi-combobox-loading-example.component?raw';
 
@@ -90,6 +92,20 @@ export class PlatformMultiComboboxDocsComponent {
         }
     ];
 
+    multiComboboxStatesExample: ExampleFile[] = [
+        {
+            language: 'html',
+            fileName: 'multi-combobox-states-example',
+            code: multiComboboxStatesHtml
+        },
+        {
+            language: 'typescript',
+            fileName: 'multi-combobox-states-example',
+            code: multiComboboxStatesTs,
+            component: 'MultiComboboxStatesExampleComponent'
+        }
+    ];
+
     multiComboboxLoadingExample: ExampleFile[] = [
         {
             language: 'html',

apps/docs/src/app/platform/component-docs/platform-multi-combobox/platform-multi-combobox-docs.module.ts

@@ -2,7 +2,11 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { MOBILE_MODE_CONFIG } from '@fundamental-ngx/core/mobile-mode';
-import { FdpFormGroupModule, PlatformMultiComboboxModule } from '@fundamental-ngx/platform/form';
+import {
+    FdpFormGroupModule,
+    PlatformMultiComboboxModule,
+    PlatformComboboxModule
+} from '@fundamental-ngx/platform/form';
 import { BusyIndicatorModule } from '@fundamental-ngx/core/busy-indicator';
 
 import { ApiComponent } from '../../../documentation/core-helpers/api/api.component';
@@ -16,6 +20,7 @@ import { MultiComboboxMobileExampleComponent } from './examples/multi-combobox-m
 import { MultiComboboxGroupExampleComponent } from './examples/multi-combobox-group/multi-combobox-group-example.component';
 import { MultiComboboxColumnsExampleComponent } from './examples/multi-combobox-columns/multi-combobox-columns-example.component';
 import { MultiComboboxFormsExampleComponent } from './examples/multi-combobox-forms/multi-combobox-forms-example.component';
+import { MultiComboboxStatesExampleComponent } from './examples/multi-combobox-states/multi-combobox-states-example.component';
 import { MultiComboboxLoadingExampleComponent } from './examples/multi-combobox-loading/multi-combobox-loading-example.component';
 
 const routes: Routes = [
@@ -35,6 +40,8 @@ const routes: Routes = [
         SharedDocumentationPageModule,
         FdpFormGroupModule,
         PlatformMultiComboboxModule,
+        PlatformComboboxModule,
+        PlatformMultiComboboxModule,
         BusyIndicatorModule
     ],
     exports: [RouterModule],
@@ -47,6 +54,7 @@ const routes: Routes = [
         MultiComboboxGroupExampleComponent,
         MultiComboboxColumnsExampleComponent,
         MultiComboboxFormsExampleComponent,
+        MultiComboboxStatesExampleComponent,
         MultiComboboxLoadingExampleComponent
     ]
 })

libs/platform/src/lib/form/auto-complete/auto-complete.directive.ts

@@ -82,6 +82,7 @@ export class AutoCompleteDirective {
 
             this._oldValue = this.inputText;
             const item = this._searchByStrategy();
+
             if (item) {
                 this._typeahead(item.label);
             }