feat(combo): add display text overwrite to selection change event, #6342

Author: ViktorSlavov

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

@@ -1018,6 +1018,7 @@ describe('igxCombo', () => {
                 newSelection: [targetItem.itemID],
                 added: [targetItem.itemID],
                 removed: [],
+                textValue: `${targetItem.value[combo.displayKey]}`,
                 event: undefined,
                 cancel: false
             });
@@ -1032,6 +1033,7 @@ describe('igxCombo', () => {
                 newSelection: [],
                 added: [],
                 removed: [targetItem.itemID],
+                textValue: '',
                 event: undefined,
                 cancel: false
             });
@@ -1056,6 +1058,7 @@ describe('igxCombo', () => {
                 newSelection: newSelection,
                 added: [combo.data[1], combo.data[5], combo.data[6]],
                 removed: [],
+                textValue: `${newSelection.map(entry => entry[combo.displayKey])}`,
                 event: undefined,
                 cancel: false
             });
@@ -1072,6 +1075,7 @@ describe('igxCombo', () => {
                 newSelection: newSelection,
                 removed: [],
                 added: [combo.data[3]],
+                textValue: `${newSelection.map(entry => entry[combo.displayKey])}`,
                 event: undefined,
                 cancel: false
             });
@@ -1087,6 +1091,7 @@ describe('igxCombo', () => {
                 newSelection: newSelection,
                 removed: oldSelection,
                 added: [combo.data[0]],
+                textValue: `${newSelection.map(entry => entry[combo.displayKey])}`,
                 event: undefined,
                 cancel: false
             });
@@ -1103,6 +1108,7 @@ describe('igxCombo', () => {
                 oldSelection: oldSelection,
                 newSelection: newSelection,
                 removed: [combo.data[0]],
+                textValue: `${newSelection.map(entry => entry[combo.displayKey])}`,
                 added: [],
                 event: undefined,
                 cancel: false
@@ -1420,11 +1426,12 @@ describe('igxCombo', () => {
             const dropdown = combo.dropdown;
             let timesFired = 1;
             const mockEvent = new MouseEvent('click');
-            const eventParams = {
+            const eventParams: IComboSelectionChangeEventArgs = {
                 oldSelection: [],
                 newSelection: [],
                 added: [],
                 removed: [],
+                textValue: '',
                 event: mockEvent,
                 cancel: false
             };
@@ -1591,12 +1598,13 @@ describe('igxCombo', () => {
             fixture.detectChanges();
             const combo = fixture.componentInstance.combo;
             const selectionSpy = spyOn(fixture.componentInstance, 'onSelectionChange');
-            const expectedResults = {
+            const expectedResults: IComboSelectionChangeEventArgs = {
                 newSelection: [combo.data[0]],
                 oldSelection: [],
                 added: [combo.data[0]],
                 removed: [],
                 event: undefined,
+                textValue: `${combo.data[0][combo.displayKey]}`,
                 cancel: false
             };
             combo.selectItems([combo.data[0]]);
@@ -1605,6 +1613,7 @@ describe('igxCombo', () => {
                 newSelection: [],
                 oldSelection: [combo.data[0]],
                 added: [],
+                textValue: '',
                 removed: [combo.data[0]]
             });
             combo.deselectItems([combo.data[0]]);
@@ -1616,12 +1625,13 @@ describe('igxCombo', () => {
             fixture.detectChanges();
             const combo = fixture.componentInstance.combo;
             const selectionSpy = spyOn(fixture.componentInstance, 'onSelectionChange');
-            const expectedResults = {
+            const expectedResults: IComboSelectionChangeEventArgs = {
                 newSelection: [combo.data[0], combo.data[1], combo.data[2]],
                 oldSelection: [],
                 added: [combo.data[0], combo.data[1], combo.data[2]],
                 removed: [],
                 event: undefined,
+                textValue: `${[combo.data[0], combo.data[1], combo.data[2]].map(entry => entry[combo.displayKey]).join(', ')}`,
                 cancel: false
             };
             combo.selectItems([combo.data[0], combo.data[1], combo.data[2]]);
@@ -1631,13 +1641,15 @@ describe('igxCombo', () => {
                 newSelection: [combo.data[1], combo.data[2]],
                 oldSelection: [combo.data[0], combo.data[1], combo.data[2]],
                 added: [],
+                textValue: `${[combo.data[1], combo.data[2]].map(entry => entry[combo.displayKey]).join(', ')}`,
                 removed: [combo.data[0]]
             });
             expect(selectionSpy).toHaveBeenCalledWith(expectedResults);
             Object.assign(expectedResults, {
                 newSelection: [combo.data[4], combo.data[5], combo.data[6]],
                 oldSelection: [combo.data[1], combo.data[2]],
                 added: [combo.data[4], combo.data[5], combo.data[6]],
+                textValue: `${[combo.data[4], combo.data[5], combo.data[6]].map(entry => entry[combo.displayKey]).join(', ')}`,
                 removed: [combo.data[1], combo.data[2]]
             });
             combo.selectItems([combo.data[4], combo.data[5], combo.data[6]], true);

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

@@ -91,6 +91,8 @@ export interface IComboSelectionChangeEventArgs extends CancelableEventArgs, IBa
     added: any[];
     /** An array containing the values that will be removed from the selection (if any) */
     removed: any[];
+    /** The text displayed in the combo text box */
+    textValue: string;
     /** The user interaction that triggered the selection change */
     event?: Event;
 }
@@ -1382,12 +1384,15 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     protected setSelection(newSelection: Set<any>, event?: Event): void {
         const removed = diffInSets(this.selection.get(this.id), newSelection);
         const added = diffInSets(newSelection, this.selection.get(this.id));
+        const newSelectionAsArray = Array.from(newSelection);
+        const text = this.concatTextValue(newSelectionAsArray);
         const args: IComboSelectionChangeEventArgs = {
-            newSelection: Array.from(newSelection),
+            newSelection: newSelectionAsArray,
             oldSelection: Array.from(this.selection.get(this.id) || []),
             added,
             removed,
             event,
+            textValue: text,
             cancel: false
         };
         this.onSelectionChange.emit(args);
@@ -1415,6 +1420,17 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
         }
     }
 
+    /** Returns a string that should be populated in the combo's text box
+     * If the combo is remote, returns an empty string (as the items may not be loaded yet)
+     */
+    private concatTextValue(selection: any[]): string {
+        if (this.isRemote) { return ''; }
+        const value = this.displayKey !== null && this.displayKey !== undefined ?
+        this.convertKeysToItems(selection).map(entry => entry[this.displayKey]).join(', ') :
+        selection.join(', ');
+        return value;
+    }
+
     /** if there is a valueKey - map the keys to data items, else - just return the keys */
     private convertKeysToItems(keys: any[]) {
         if (this.comboAPI.valueKey === null) {