Add displayValue and change selection and value (#13207)

* feat(combo): add displayValue and change selection and value

* chore(combo): add migrations and update CHANGELOG.md

* chore(combo): add requested changes

Author: MonikaKirkova

CHANGELOG.md

@@ -46,6 +46,12 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - The `draggable` attribute is no longer required to be set on interactable elements, if a column header is templated and the Column Moving is enabled in order for handlers for any event to be triggered. Now `draggable='false'` can be used as an addition if the user shouldn't be able to drag a column by that element, but even if omitted `click` events for example will trigger now.
     - **Behavioral Change** When there are already grouped columns, the group drop area now shows after dragging of a column starts and not when only click actions are performed.
+- `IgxCombo`, `IgxSimpleCombo`:
+    - **Breaking Change**  The `selection` property returns an array of the selected items even when a value key is provided and the `value` property returns an array of value keys instead of display keys. Automatic migrations are available and will be applied on `ng update`.
+
+### New Features
+- `IgxCombo`, `IgxSimpleCombo`
+    - Added new property `displayValue` that returns array of display keys.
 
 ## 16.0.0
 

projects/igniteui-angular/migrations/update-16_1_0/changes/members.json

@@ -0,0 +1,21 @@
+{
+    "$schema": "../../common/schema/members-changes.schema.json",
+    "changes": [
+        {
+            "member": "value",
+            "replaceWith": "displayValue",
+            "definedIn": [
+                "IgxComboComponent",
+                "IgxSimpleComboComponent"
+            ]
+        },
+        {
+            "member": "selection",
+            "replaceWith": "value",
+            "definedIn": [
+                "IgxComboComponent",
+                "IgxSimpleComboComponent"
+            ]
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-16_1_0/index.spec.ts

@@ -88,4 +88,48 @@ describe(`Update to ${version}`, () => {
             </igx-stepper>`);
 
     });
+
+    it('Should properly rename value property to displayValue and selection to value', async () => {
+        pending('set up tests for migrations through lang service');
+        appTree.create('/testSrc/appPrefix/component/test.component.ts',
+        `
+        import { IgxComboComponent } from 'igniteui-angular';
+        export class MyClass {
+            @ViewChild(IgxComboComponent, { read: IgxComboComponent })
+            public combo: IgxComboComponent;
+            @ViewChild(IgxSimpleComboComponent, { read: IgxSimpleComboComponent })
+            public simpleCombo: IgxSimpleComboComponent;
+            public ngAfterViewInit() {
+                const comboDisplayValue = combo.value;
+                const comboSelectionValue = combo.selection;
+                const simpleComboDisplayValue = simpleCombo.value;
+                const simpleComboSelectionValue = simpleCombo.selection;
+            }
+        }
+        `);
+
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        expect(
+            tree.readContent('/testSrc/appPrefix/component/test.component.ts')
+        ).toEqual(
+        `
+        import { IgxComboComponent } from 'igniteui-angular';
+        export class MyClass {
+            @ViewChild(IgxComboComponent, { read: IgxComboComponent })
+            public combo: IgxComboComponent;
+            @ViewChild(IgxSimpleComboComponent, { read: IgxSimpleComboComponent })
+            public simpleCombo: IgxSimpleComboComponent;
+            public ngAfterViewInit() {
+                const comboDisplayValue = combo.displayValue;
+                const comboSelectionValue = combo.value;
+                const simpleComboDisplayValue = simpleCombo.displayValue;
+                const simpleComboSelectionValue = simpleCombo.value;
+            }
+        }
+        `
+        );
+    });
 });

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -812,17 +812,29 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     }
 
     /**
-     * The text displayed in the combo input
+     * The value of the selected item in the combo
      *
      * ```typescript
      * // get
      * let comboValue = this.combo.value;
      * ```
      */
-    public get value(): string {
+    public get value(): any[] {
         return this._value;
     }
 
+    /**
+     * The text displayed in the combo input
+     *
+     * ```typescript
+     * // get
+     * let comboDisplayValue = this.combo.displayValue;
+     * ```
+     */
+    public get displayValue(): string[] {
+        return this._displayValue ? this._displayValue.split(', ') : [];
+    }
+
     /**
      * Defines the current state of the virtualized data. It contains `startIndex` and `chunkSize`
      *
@@ -923,7 +935,8 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
          this._filteringOptions = value;
      }
     protected _data = [];
-    protected _value = '';
+    protected _value = [];
+    protected _displayValue = '';
     protected _groupKey = '';
     protected _searchValue = '';
     protected _filteredData = [];
@@ -1024,7 +1037,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      * ```
      */
     public toggle(): void {
-        if (this.collapsed && this._value.length !== 0) {
+        if (this.collapsed && this._displayValue.length !== 0) {
             this.filterValue = '';
             this.cdr.detectChanges();
         }
@@ -1044,7 +1057,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      * ```
      */
     public open(): void {
-        if (this.collapsed && this._value.length !== 0) {
+        if (this.collapsed && this._displayValue.length !== 0) {
             this.filterValue = '';
             this.cdr.detectChanges();
         }
@@ -1082,7 +1095,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      */
     public get selection() {
         const items = Array.from(this.selectionService.get(this.id));
-        return items;
+        return this.convertKeysToItems(items);
     }
 
     /**
@@ -1280,7 +1293,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
 
     /** if there is a valueKey - map the keys to data items, else - just return the keys */
     protected convertKeysToItems(keys: any[]) {
-        if (this.comboAPI.valueKey === null) {
+        if (this.valueKey === null || this.valueKey === undefined) {
             return keys;
         }
 

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -8,7 +8,7 @@
     <ng-container ngProjectAs="igx-hint, [igxHint]">
         <ng-content select="igx-hint, [igxHint]"></ng-content>
     </ng-container>
-    <input igxInput #comboInput name="comboInput" type="text" [value]="value" readonly
+    <input igxInput #comboInput name="comboInput" type="text" [value]="displayValue.join(', ')" readonly
             [attr.placeholder]="placeholder" [disabled]="disabled"
             role="combobox" aria-haspopup="listbox"
             [attr.aria-expanded]="!this.dropdown.collapsed" [attr.aria-controls]="this.dropdown.listId"
@@ -17,7 +17,7 @@
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>
-    <igx-suffix *ngIf="value.length" aria-label="Clear Selection" class="igx-combo__clear-button"
+    <igx-suffix *ngIf="displayValue.length" aria-label="Clear Selection" class="igx-combo__clear-button"
         (click)="handleClearItems($event)">
         <ng-container *ngIf="clearIconTemplate">
             <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>