Merge pull request #10500 from IgniteUI/bpenkov/combo-edit

Handle clear w/o valueKey

Author: Lipata

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

@@ -386,6 +386,21 @@ describe('IgxSimpleCombo', () => {
             fixture.detectChanges();
             expect(component.selectedItem).toEqual(combo.data[4]);
         }));
+
+        it('should clear selection w/o valueKey', fakeAsync(() => {
+            fixture = TestBed.createComponent(ComboModelBindingComponent);
+            fixture.detectChanges();
+            const component = fixture.componentInstance;
+            combo = fixture.componentInstance.combo;
+            component.items = ['One', 'Two', 'Three', 'Four', 'Five'];
+            combo.select('Three');
+            fixture.detectChanges();
+            expect(combo.selection).toEqual(['Three']);
+            combo.handleClear(new MouseEvent('click'));
+            fixture.detectChanges();
+            expect(combo.value).toEqual('');
+        }));
+
         it('should properly bind to values w/o valueKey', fakeAsync(() => {
             fixture = TestBed.createComponent(ComboModelBindingComponent);
             fixture.detectChanges();

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

@@ -370,7 +370,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             if (this._updateInput) {
                 this.comboInput.value = this._value = displayText !== args.displayText
                     ? args.displayText
-                    : this.createDisplayText([args.newSelection], [args.oldSelection]);
+                    : this.createDisplayText(argsSelection, [args.oldSelection]);
             }
             this._onChangeCallback(args.newSelection);
             this._updateInput = true;
@@ -382,9 +382,12 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             return this.getRemoteSelection(newSelection, oldSelection);
         }
 
-        return this.displayKey !== null && this.displayKey !== undefined
-            ? this.convertKeysToItems(newSelection).map(e => e[this.displayKey])[0]
-            : newSelection[0];
+        if (this.displayKey !== null && this.displayKey !== undefined
+            && newSelection.length > 0) {
+            return this.convertKeysToItems(newSelection).map(e => e[this.displayKey])[0];
+        }
+
+        return newSelection[0] || '';
     }
 
     private clearSelection(ignoreFilter?: boolean): void {