fix(combos): displayValue as actual string (#13648)

Author: damyanpetev

CHANGELOG.md

@@ -35,6 +35,8 @@ All notable changes for each version of this project will be documented in this
 
       Note: In remote data scenarios with `valueKey` set, selected items that are not currently part of the loaded data chunk will be emitted a partial item data object with the `valueKey` property.
     - **Breaking Change** The `value` and `selection` properties now correctly return a single value or data item instead of the same wrapped in array and `undefined` instead of empty array, matching the values emitted from selection event and when working with `formControlName`/`ngModel` directives.
+- `IgxCombo`,`IgxSimpleCombo`
+    - **Breaking Change** The `displayValue` property now returns the display text as expected (instead of display values in array).
 
 ## 16.1.4
 ### New Features

projects/igniteui-angular/src/lib/combo/README.md

@@ -299,7 +299,7 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
 | Name                  | Description                                       | Type                        |
 |-----------------------|---------------------------------------------------|-----------------------------|
 | `id`                  | combo id                                          | string                      |
-| `data`                | combo data source                                 | any                         |
+| `data`                | combo data source                                 | any[]                       |
 | `allowCustomValue`    | enables/disables combo custom value               | boolean                     |
 | `filterable`          | enables/disables combo drop down filtering - enabled by default | boolean       |
 | `showSearchCaseIcon`  | defines whether the search case-sensitive icon should be displayed - disabled by default | boolean |
@@ -328,7 +328,9 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
 ### Getters
 | Name                     | Description                                       | Type                        |
 |--------------------------|---------------------------------------------------|-----------------------------|
-|  `value`                 | the value of the combo text field                 | string                      |
+|  `displayValue`          | the value of the combo text field                 | string                      |
+|  `value`                 | the value of the combo                            | any[]                       |
+|  `selection`             | the selected items of the combo                   | any[]                       |
 
 ### Outputs
 

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

@@ -814,8 +814,8 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      * let comboDisplayValue = this.combo.displayValue;
      * ```
      */
-    public get displayValue(): string[] {
-        return this._displayValue ? this._displayValue.split(', ') : [];
+    public get displayValue(): string {
+        return this._displayValue;
     }
 
     /**
@@ -1076,7 +1076,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      * let mySelection = this.combo.selection;
      * ```
      */
-    public get selection() {
+    public get selection(): any[] {
         const items = Array.from(this.selectionService.get(this.id));
         return this.convertKeysToItems(items);
     }

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

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -180,13 +180,6 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
     @ViewChild(IgxComboDropDownComponent, { static: true })
     public dropdown: IgxComboDropDownComponent;
 
-    /**
-     * @hidden @internal
-     */
-    public get inputEmpty(): boolean {
-        return this.displayValue.length === 0 && !this.placeholder;
-    }
-
     /** @hidden @internal */
     public get filteredData(): any[] | null {
         return this.filteringOptions.filterable ? this._filteredData : this.data;

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

@@ -12,7 +12,7 @@
         <ng-content select="igx-hint, [igxHint]"></ng-content>
     </ng-container>
 
-    <input #comboInput igxInput [value]="displayValue[0]" role="combobox"
+    <input #comboInput igxInput [value]="displayValue" role="combobox"
         aria-haspopup="listbox" aria-autocomplete="list" aria-readonly="false"
         [attr.aria-expanded]="!this.dropdown.collapsed" [attr.aria-controls]="this.dropdown.listId"
         [attr.aria-labelledby]="this.ariaLabelledBy || this.label?.id || this.placeholder"