feat(combo): onAddition event can now be canceled #9283 (#9284)

ViktorSlavov · web-flow · commit abe68fcf35fa · 2021-04-09T13:13:07.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -64,7 +64,23 @@ All notable changes for each version of this project will be documented in this
     - The `IgxBottomNav` component exposes `disableAnimations` property which determines whether the contents should animate when switching the selected item. The property is set to `true` by default which means that the animations are disabled. 
 - `IgxOverlayService`
     - `detach` and `detachAll` methods are added to `IgxOverlayService`. Calling `detach` will remove all the elements generated for the related overlay, as well as clean up all related resources. Calling `detachAll` will remove all elements generated by any call to `IgxOverlay` `attach`, and will clean up all related resources. _Note: calling `hide` or `hideAll` will not clean generated by the service elements and will not clean up related resources._
- 
+- `IgxCombo`
+    - Any changes to `IComboItemAdditionEvent.addedItem` will be reflected in the item added to the data.
+    - `IgxComboComponent.onAddition` is now cancelable. You can prevent the item from being added by setting the event args `cancel` property to `true`.
+    ```typescript
+    public handleComboItemAddition(event: IComboItemAdditionEvent): void {
+        if (event.addedItem[this.combo.valueKey] === 'ForbiddenValue') {
+            event.cancel = true;
+        } else if (event.addedItem[this.combo.valueKey] === 'Change Me') {
+            const index = this.iter++;
+            event.addedItem = {
+                [this.combo.valueKey]: `customId${index}`,
+                [this.combo.displayKey]: `New item ${index}`;
+            }
+        }
+    }
+    ```
+    
 ### Themes:
 - Breaking Changes:
     - `IgxButton` theme has been simplified. The number of theme params (`igx-button-theme`) has been reduced significantly and no longer includes prefixed parameters (`flat-*`, `raised-*`, etc.). See the migration guide to update existing button themes. Updates performed with `ng update` will migrate existing button themes but some additional tweaking may be required to account for the abscense of prefixed params.
diff --git a/projects/igniteui-angular/src/lib/combo/README.md b/projects/igniteui-angular/src/lib/combo/README.md
@@ -334,7 +334,7 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
 |------------------   |-------------------------------------------------------------------------|------------- |-----------------------------------------|
 | `onSelectionChange` | Emitted when item selection is changing, before the selection completes | true         | [`IComboSelectionChangeEventArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icomboselectionchangeeventargs.html) |
 | `onSearchInput`     | Emitted when an the search input's input event is triggered             | true        | { searchValue: `string` }               |
-| `onAddition`        | Emitted when an item is being added to the data collection              | false        | { oldCollection: `any[]`, addedItem: `<any>`, newCollection: `any[]` }|
+| `onAddition`        | Emitted when an item is being added to the data collection              | true        | { oldCollection: `any[]`, addedItem: `<any>`, newCollection: `any[]`, owner?: `IgxComboComponent`, cancel: `boolean` }|
 | `onDataPreLoad`     | Emitted when new chunk of data is loaded from the virtualization        | false        | { event: `Event` }                        |
 | `onOpening`   | Emitted before the dropdown is opened                                   | false        | `IBaseCancelableBrowserEventArgs` |
 | `onOpened`    | Emitted after the dropdown is opened                                    | false        | { event: `Event` }                        |
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
@@ -8,7 +8,8 @@ import {
     IgxComboModule,
     IComboSelectionChangeEventArgs,
     IgxComboState,
-    IComboSearchInputEventArgs
+    IComboSearchInputEventArgs,
+    IComboItemAdditionEvent
 } from './combo.component';
 import { IgxComboItemComponent } from './combo-item.component';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
@@ -685,6 +686,106 @@ describe('igxCombo', () => {
             combo.handleClearItems(spyObj);
             expect(combo.value).toEqual(item[0]);
         });
+
+        it('should allow canceling and overwriting of item addition', fakeAsync(() => {
+            const selectionService = new IgxSelectionAPIService();
+            combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService,
+                mockIconService, null, null, mockInjector);
+            const dropdown = jasmine.createSpyObj('IgxComboDropDownComponent', ['selectItem']);
+            const mockVirtDir = jasmine.createSpyObj('virtDir', ['scrollTo']);
+            const mockInput = jasmine.createSpyObj('mockInput', [], {
+                nativeElement: jasmine.createSpyObj('mockElement', ['focus'])
+            });
+            spyOn(combo.onAddition, 'emit').and.callThrough();
+            spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
+            const subParams: { cancel: boolean; newValue: string; modify: boolean } = {
+                cancel: false,
+                modify: false,
+                newValue: 'mockValue'
+            };
+            const sub = combo.onAddition.subscribe((e) => {
+                if (subParams.cancel) {
+                    e.cancel = true;
+                }
+                if (subParams.modify) {
+                    e.addedItem = subParams.newValue;
+                }
+            });
+
+            combo.ngOnInit();
+            combo.data = ['Item 1', 'Item 2', 'Item 3'];
+            combo.dropdown = dropdown;
+            combo.searchInput = mockInput;
+            (combo as any).virtDir = mockVirtDir;
+            let mockAddParams: IComboItemAdditionEvent = {
+                cancel: false,
+                owner: combo,
+                addedItem: 'Item 99',
+                newCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99'],
+                oldCollection: ['Item 1', 'Item 2', 'Item 3']
+            };
+
+
+            // handle addition
+
+            combo.searchValue = 'Item 99';
+            combo.addItemToCollection();
+            tick();
+            expect(combo.data.length).toEqual(4);
+            expect(combo.onAddition.emit).toHaveBeenCalledWith(mockAddParams);
+            expect(combo.onAddition.emit).toHaveBeenCalledTimes(1);
+            expect(mockVirtDir.scrollTo).toHaveBeenCalledTimes(1);
+            expect(combo.searchInput.nativeElement.focus).toHaveBeenCalledTimes(1);
+            expect(combo.data[combo.data.length - 1]).toBe('Item 99');
+            expect(selectionService.get(combo.id).size).toBe(1);
+            expect([...selectionService.get(combo.id)][0]).toBe('Item 99');
+
+            // cancel
+            subParams.cancel = true;
+            mockAddParams = {
+                cancel: true,
+                owner: combo,
+                addedItem: 'Item 99',
+                newCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99', 'Item 99'],
+                oldCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99']
+            };
+
+            combo.searchValue = 'Item 99';
+            combo.addItemToCollection();
+            tick();
+            expect(combo.onAddition.emit).toHaveBeenCalledWith(mockAddParams);
+            expect(combo.onAddition.emit).toHaveBeenCalledTimes(2);
+            expect(mockVirtDir.scrollTo).toHaveBeenCalledTimes(1);
+            expect(combo.searchInput.nativeElement.focus).toHaveBeenCalledTimes(1);
+            expect(combo.data.length).toEqual(4);
+            expect(combo.data[combo.data.length - 1]).toBe('Item 99');
+            expect(selectionService.get(combo.id).size).toBe(1);
+            expect([...selectionService.get(combo.id)][0]).toBe('Item 99');
+
+            // overwrite
+            subParams.modify = true;
+            subParams.cancel = false;
+            mockAddParams = {
+                cancel: false,
+                owner: combo,
+                addedItem: 'mockValue',
+                newCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99', 'Item 99'],
+                oldCollection: ['Item 1', 'Item 2', 'Item 3', 'Item 99']
+            };
+
+            combo.searchValue = 'Item 99';
+            combo.addItemToCollection();
+            tick();
+            expect(combo.onAddition.emit).toHaveBeenCalledWith(mockAddParams);
+            expect(combo.onAddition.emit).toHaveBeenCalledTimes(3);
+            expect(mockVirtDir.scrollTo).toHaveBeenCalledTimes(2);
+            expect(combo.searchInput.nativeElement.focus).toHaveBeenCalledTimes(2);
+            expect(combo.data.length).toEqual(5);
+            expect(combo.data[combo.data.length - 1]).toBe(subParams.newValue);
+            expect(selectionService.get(combo.id).size).toBe(2);
+            expect([...selectionService.get(combo.id)][1]).toBe(subParams.newValue);
+            sub.unsubscribe();
+        }));
     });
     describe('Initialization and rendering tests: ', () => {
         configureTestSuite();
diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts
@@ -16,7 +16,7 @@ import {
 import { FormsModule, ReactiveFormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, AbstractControl } from '@angular/forms';
 import { IgxCheckboxModule } from '../checkbox/checkbox.component';
 import { IgxSelectionAPIService } from '../core/selection';
-import { cloneArray, IBaseEventArgs, IBaseCancelableBrowserEventArgs, IBaseCancelableEventArgs } from '../core/utils';
+import { cloneArray, IBaseEventArgs, IBaseCancelableBrowserEventArgs, IBaseCancelableEventArgs, CancelableEventArgs } from '../core/utils';
 import { IgxStringFilteringOperand, IgxBooleanFilteringOperand } from '../data-operations/filtering-condition';
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
 import { IgxForOfModule, IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive';
@@ -110,7 +110,7 @@ export interface IComboSearchInputEventArgs extends IBaseCancelableEventArgs {
     searchText: string;
 }
 
-export interface IComboItemAdditionEvent extends IBaseEventArgs {
+export interface IComboItemAdditionEvent extends IBaseEventArgs, CancelableEventArgs {
     oldCollection: any[];
     addedItem: any;
     newCollection: any[];
@@ -783,8 +783,8 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     @Input()
     public get type(): IgxInputGroupType {
-            return this._type || this._inputGroupType || 'box';
-        }
+        return this._type || this._inputGroupType || 'box';
+    }
 
     public set type(val: IgxInputGroupType) {
         this._type = val;
@@ -1107,18 +1107,21 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
         if (this.groupKey) {
             Object.assign(addedItem, { [this.groupKey]: this.defaultFallbackGroup });
         }
-        const oldCollection = this.data;
-        const newCollection = [...this.data];
-        newCollection.push(addedItem);
+        // expose shallow copy instead of this.data in event args so this.data can't be mutated
+        const oldCollection = [...this.data];
+        const newCollection = [...this.data, addedItem];
         const args: IComboItemAdditionEvent = {
-            oldCollection, addedItem, newCollection, owner: this
+            oldCollection, addedItem, newCollection, owner: this, cancel: false
         };
         this.onAddition.emit(args);
-        this.data.push(addedItem);
-        // If you mutate the array, no pipe is invoked and the display isn't updated;
-        // if you replace the array, the pipe executes and the display is updated.
+        if (args.cancel) {
+            return;
+        }
+        this.data.push(args.addedItem);
+        // trigger re-render
         this.data = cloneArray(this.data);
-        this.selectItems(this.comboAPI.valueKey !== null ? [addedItem[this.valueKey]] : [addedItem], false);
+        this.selectItems(this.valueKey !== null && this.valueKey !== undefined ?
+            [args.addedItem[this.valueKey]] : [args.addedItem], false);
         this.customValueFlag = false;
         this.searchInput.nativeElement.focus();
         this.dropdown.focusedItem = null;
@@ -1553,9 +1556,9 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     private getValueDisplayPairs(ids: any[]) {
         return this.data.filter(entry => ids.indexOf(entry[this.valueKey]) > -1).map(e => ({
-                [this.valueKey]: e[this.valueKey],
-                [this.displayKey]: e[this.displayKey]
-            }));
+            [this.valueKey]: e[this.valueKey],
+            [this.displayKey]: e[this.displayKey]
+        }));
     }
 
     private checkMatch(): void {
