fix(simple-combo): preserved the input value when selectionChanging is canceled

Author: georgianastasov

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

@@ -1598,6 +1598,7 @@ describe('IgxSimpleCombo', () => {
 
         it('should not change selection when selectionChanging event is canceled', () => {
             spyOn(combo.selectionChanging, 'emit').and.callThrough();
+
             fixture.detectChanges();
 
             combo.select('Connecticut');
@@ -1630,6 +1631,61 @@ describe('IgxSimpleCombo', () => {
                 region: 'New England'
             });
         });
+
+
+        it('should preserved the input value of the combo when selectionChanging event is canceled', () => {
+            spyOn(combo.selectionChanging, 'emit').and.callThrough();
+            fixture.detectChanges();
+
+            const comboInput = fixture.debugElement.query(By.css(`.igx-input-group__input`));
+            fixture.detectChanges();
+
+            combo.select('Connecticut');
+            fixture.detectChanges();
+
+            expect(combo.selection).toEqual({
+                field: 'Connecticut',
+                region: 'New England'
+            });
+
+            const cancelEventSpy = spyOn(combo.selectionChanging, 'emit').and.callFake((args: ISimpleComboSelectionChangingEventArgs) => {
+                args.cancel = true;
+            });
+
+            const clearButton = fixture.debugElement.query(By.css(`.${CSS_CLASS_CLEARBUTTON}`));
+            clearButton.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+
+            expect(cancelEventSpy).toHaveBeenCalled();
+            expect(combo.selection).toEqual({
+                field: 'Connecticut',
+                region: 'New England'
+            });
+
+            expect(comboInput.nativeElement.value).toEqual('Connecticut');
+
+            combo.handleInputChange('z');
+            fixture.detectChanges();
+
+            expect(cancelEventSpy).toHaveBeenCalled();
+            expect(combo.selection).toEqual({
+                field: 'Connecticut',
+                region: 'New England'
+            });
+
+            expect(comboInput.nativeElement.value).toEqual('Connecticut');
+
+            combo.handleInputChange(' ');
+            fixture.detectChanges();
+
+            expect(cancelEventSpy).toHaveBeenCalled();
+            expect(combo.selection).toEqual({
+                field: 'Connecticut',
+                region: 'New England'
+            });
+
+            expect(comboInput.nativeElement.value).toEqual('Connecticut');
+        });
     });
 
     describe('Display density', () => {

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

@@ -400,13 +400,19 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         if (this.disabled) {
             return;
         }
+
+        const oldSelection = this.selection;
         this.clearSelection(true);
+
         if(!this.collapsed){
             this.focusSearchInput(true);
         }
         event.stopPropagation();
 
-        this.comboInput.value = this.filterValue = this.searchValue = '';
+        if (this.selection !== oldSelection) {
+            this.comboInput.value = this.filterValue = this.searchValue = '';
+        }
+
         this.dropdown.focusedItem = null;
         this.composing = false;
         this.comboInput.focus();
@@ -498,6 +504,15 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             this._updateInput = true;
         } else if (this.isRemote) {
             this.registerRemoteEntries(newValueAsArray, false);
+        } else {
+            args.displayText = this.createDisplayText(oldItems, []);
+
+            const oldSelectionArray = args.oldSelection ? [args.oldSelection] : [];
+            this.comboInput.value = this._displayValue = this.searchValue = this.createDisplayText(oldSelectionArray, []);
+
+            if (this.isRemote) {
+                this.registerRemoteEntries(newValueAsArray, false);
+            }
         }
     }
 
@@ -570,7 +585,10 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
 
     private clear(): void {
         this.clearSelection(true);
-        this.comboInput.value = this._displayValue = this.searchValue = '';
+        const oldSelection = this.selection;
+        if (this.selection !== oldSelection) {
+            this.comboInput.value = this._displayValue = this.searchValue = '';
+        }
     }
 
     private isValid(value: any): boolean {