Merge pull request #14308 from IgniteUI/ganastasov/fix-14200-17.2

fix(simple-combo): trigger selectionChanging on input clear - 17.2

Author: kacheshmarova

CHANGELOG.md

@@ -28,6 +28,7 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxSimpleCombo`
     - **Behavioral Change** When bound to `ngModel` and `formControlName` directives, the model would not be updated when the user types into the input and will only be updated on selection.
+    - **Behavioral Change** The `selectionChanging` event will now trigger when typing the first character in the input if there is a previously selected value in the `IgxSimpleCombo`.
 
 
 ## 17.1.0

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

@@ -1556,6 +1556,136 @@ describe('IgxSimpleCombo', () => {
 
             expect(spy).toHaveBeenCalledTimes(1);
         }));
+
+        it('should emit selectionChanging event when input value changes', () => {
+            spyOn(combo.selectionChanging, 'emit').and.callThrough();
+            fixture.detectChanges();
+
+            combo.select('Connecticut');
+            fixture.detectChanges();
+
+            expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(1);
+            expect(combo.selectionChanging.emit).toHaveBeenCalledWith({
+                newValue: "Connecticut",
+                oldValue: undefined,
+                newSelection: {
+                    field: "Connecticut",
+                    region: "New England"
+                },
+                oldSelection: undefined,
+                displayText: 'Connecticut',
+                owner: combo,
+                cancel: false
+            });
+
+            combo.handleInputChange('z');
+            fixture.detectChanges();
+
+            expect(combo.selectionChanging.emit).toHaveBeenCalledTimes(2);
+            expect(combo.selectionChanging.emit).toHaveBeenCalledWith({
+                oldValue: "Connecticut",
+                newValue: undefined,
+                oldSelection: {
+                    field: "Connecticut",
+                    region: "New England"
+                },
+                newSelection: undefined,
+                owner: combo,
+                displayText: "z",
+                cancel: false
+            });
+        });
+
+        it('should not change selection when selectionChanging event is canceled', () => {
+            spyOn(combo.selectionChanging, 'emit').and.callThrough();
+
+            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;
+            });
+
+            combo.handleInputChange('z');
+            fixture.detectChanges();
+
+            expect(cancelEventSpy).toHaveBeenCalled();
+            expect(combo.selection).toEqual({
+                field: 'Connecticut',
+                region: 'New England'
+            });
+
+            combo.handleInputChange(' ');
+            fixture.detectChanges();
+
+            expect(cancelEventSpy).toHaveBeenCalled();
+            expect(combo.selection).toEqual({
+                field: 'Connecticut',
+                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

@@ -294,7 +294,19 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             this.filterValue = '';
         }
         if (super.selection.length) {
-            this.selectionService.clear(this.id);
+            const args: ISimpleComboSelectionChangingEventArgs = {
+                newValue: undefined,
+                oldValue: this.selectedItem,
+                newSelection: undefined,
+                oldSelection: this.selection,
+                displayText: typeof event === 'string' ? event : event?.target?.value,
+                owner: this,
+                cancel: false
+            };
+            this.selectionChanging.emit(args);
+            if (!args.cancel) {
+                this.selectionService.select_items(this.id, [], true);
+            }
         }
         // when filtering the focused item should be the first item or the currently selected item
         if (!this.dropdown.focusedItem || this.dropdown.focusedItem.id !== this.dropdown.items[0].id) {
@@ -390,13 +402,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();
@@ -488,6 +506,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);
+            }
         }
     }
 
@@ -560,7 +587,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 {