fix(button-group): reverted cancellable on selected and deselected events

Author: georgianastasov

CHANGELOG.md

@@ -15,8 +15,14 @@ All notable changes for each version of this project will be documented in this
     - `igniteui-angular` components have improved tree-shaking
 - DisplayDensity token and inputs are deprecated in favor of `--ig-size` theming
 - We're working on reducing the library size
-    - IgxRadioComponent has been reduced in half
-    - IgxSwitchComponent has been reduced in half
+    - `IgxRadioComponent` size has been reduced in half
+    - `IgxSwitchComponent` size has been reduced in half
+- `IgxRadioComponent` 
+    - **Breaking Change** `IChangeRadioEventArgs` is now `IChangeCheckboxEventArgs`. `ng update` to `17.0.0` will automatically migrate this for you.
+    - **Breaking Change** `RadioLabelPosition` is now `LabelPosition`. `ng update` to `17.0.0` will automatically migrate this for you.
+- `IgxSwitchComponent`
+    - **Breaking Change** `IChangeSwitchEventArgs` is now `IChangeCheckboxEventArgs`. `ng update` to `17.0.0` will automatically migrate this for you.
+    - **Breaking Change** `SwitchLabelPosition` is now `LabelPosition`. `ng update` to `17.0.0` will automatically migrate this for you.
 - `IgxCombo`
     - **Breaking Change** `IComboSelectionChangingEventArgs` properties `newSelection` and `oldSelection` have been renamed to `newValue` and `oldValue` respectively to better reflect their function. Just like Combo's `value`, those will emit either the specified property values or full data items depending on whether `valueKey` is set or not. Automatic migrations are available and will be applied on `ng update`.
     - `IComboSelectionChangingEventArgs` exposes two new properties `newSelection` and `oldSelection` in place of the old ones that are no longer affected by `valueKey` and consistently emit items from Combo's `data`.
@@ -28,8 +34,9 @@ All notable changes for each version of this project will be documented in this
     - `ISimpleComboSelectionChangingEventArgs` exposes two new properties `newSelection` and `oldSelection` in place of the old ones that are no longer affected by `valueKey` and consistently emit items from Combo's `data`.
 
       Note: In remote data scenarios with `valueKey` set, selected items that are not currently part of the loaded data chunk will be emitted a partial item data object with the `valueKey` property.
-- `IgxButtonGroup`:
-    - Adding cancellable `selecting` and `deselecting` events that are fired before selecting or deselecting a button.
+    - **Breaking Change** The `value` and `selection` properties now correctly return a single value or data item instead of the same wrapped in array and `undefined` instead of empty array, matching the values emitted from selection event and when working with `formControlName`/`ngModel` directives.
+- `IgxCombo`,`IgxSimpleCombo`
+    - **Breaking Change** The `displayValue` property now returns the display text as expected (instead of display values in array).
 
 ## 16.1.5
 ### General

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

@@ -24,7 +24,7 @@ import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
 
 import { takeUntil } from 'rxjs/operators';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
-import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
+import { IBaseEventArgs } from '../core/utils';
 import { mkenum } from '../core/utils';
 import { IgxIconComponent } from '../icon/icon.component';
 
@@ -238,40 +238,6 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
         return this._isVertical ? ButtonGroupAlignment.vertical : ButtonGroupAlignment.horizontal;
     }
 
-    /**
-     * An @Ouput property that emits an event before selecting a button.
-     * ```typescript
-     * @ViewChild("toast")
-     * private toast: IgxToastComponent;
-     * public selectedHandler(buttongroup) {
-     *     this.toast.open()
-     * }
-     * ```
-     * ```html
-     * <igx-buttongroup #MyChild (selecting)="selectingHandler($event)"></igx-buttongroup>
-     * <igx-toast #toast>You are currently selecting a button.</igx-toast>
-     * ```
-     */
-    @Output()
-    public selecting = new EventEmitter<IButtonGroupCancellableEventArgs>();
-
-    /**
-     * An @Ouput property that emits an event before deselecting a button.
-     * ```typescript
-     * @ViewChild("toast")
-     * private toast: IgxToastComponent;
-     * public selectedHandler(buttongroup) {
-     *     this.toast.open()
-     * }
-     * ```
-     * ```html
-     * <igx-buttongroup #MyChild (selecting)="deselectingHandler($event)"></igx-buttongroup>
-     * <igx-toast #toast>You are currently deselecting a button.</igx-toast>
-     * ```
-     */
-    @Output()
-    public deselecting = new EventEmitter<IButtonGroupCancellableEventArgs>();
-
     /**
      * An @Ouput property that emits an event when a button is selected.
      * ```typescript
@@ -517,30 +483,22 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     public _clickHandler(index: number) {
         const button = this.buttons[index];
         const args: IButtonGroupEventArgs = { owner: this, button, index };
-        const cancellableArgs: IButtonGroupCancellableEventArgs = { cancel: false, owner: this, button, index };
 
         if (this.selectionMode !== 'multi') {
             this.buttons.forEach((b, i) => {
                 if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
-                    this.deselecting.emit({ cancel: false, owner: this, button: b, index: i });
                     this.deselected.emit({ owner: this, button: b, index: i });
                 }
             });
         }
 
         if (this.selectedIndexes.indexOf(index) === -1) {
-            this.selecting.emit(cancellableArgs);
-            if (!cancellableArgs.cancel) {
-                this.selectButton(index);
-                this.selected.emit(args);
-            }
+            this.selectButton(index);
+            this.selected.emit(args);
         } else {
             if (this.selectionMode !== 'singleRequired') {
-                this.deselecting.emit(cancellableArgs);
-                if (!cancellableArgs.cancel) {
-                    this.deselectButton(index);
-                    this.deselected.emit(args);
-                }
+                this.deselectButton(index);
+                this.deselected.emit(args);
             }
         }
     }
@@ -550,6 +508,4 @@ export interface IButtonGroupEventArgs extends IBaseEventArgs {
     owner: IgxButtonGroupComponent;
     button: IgxButtonDirective;
     index: number;
-}
-
-export interface IButtonGroupCancellableEventArgs extends IButtonGroupEventArgs, CancelableEventArgs {}
+}

projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts

@@ -94,54 +94,6 @@ describe('IgxButtonGroup', () => {
         expect(buttongroup.selectedButtons.length).toEqual(0);
     });
 
-    it('should fire the selecting event when a button is being selected by user interaction, not on initial or programmatic selection', () => {
-        const fixture = TestBed.createComponent(ButtonGroupWithSelectedButtonComponent);
-        fixture.detectChanges();
-
-        const btnGroupInstance = fixture.componentInstance.buttonGroup;
-        spyOn(btnGroupInstance.selecting, 'emit');
-
-        btnGroupInstance.ngAfterViewInit();
-        fixture.detectChanges();
-
-        expect(btnGroupInstance.selecting.emit).not.toHaveBeenCalled();
-
-        btnGroupInstance.buttons[1].select();
-        fixture.detectChanges();
-
-        expect(btnGroupInstance.selecting.emit).not.toHaveBeenCalled();
-
-        const button = fixture.debugElement.nativeElement.querySelector('button');
-        button.click();
-
-        expect(btnGroupInstance.selecting.emit).toHaveBeenCalled();
-    });
-
-    it('should fire the deselecting event when a button is being deselected by user interaction, not on programmatic deselection', () => {
-        const fixture = TestBed.createComponent(ButtonGroupWithSelectedButtonComponent);
-        fixture.detectChanges();
-
-        const btnGroupInstance = fixture.componentInstance.buttonGroup;
-        btnGroupInstance.buttons[0].select();
-        btnGroupInstance.buttons[1].select();
-        spyOn(btnGroupInstance.deselecting, 'emit');
-
-        btnGroupInstance.ngAfterViewInit();
-        fixture.detectChanges();
-
-        expect(btnGroupInstance.deselecting.emit).not.toHaveBeenCalled();
-
-        btnGroupInstance.buttons[1].deselect();
-        fixture.detectChanges();
-
-        expect(btnGroupInstance.deselecting.emit).not.toHaveBeenCalled();
-
-        const button = fixture.debugElement.nativeElement.querySelector('button');
-        button.click();
-
-        expect(btnGroupInstance.deselecting.emit).toHaveBeenCalled();
-    });
-
     it('should fire the selected event when a button is selected by user interaction, not on initial or programmatic selection', () => {
         const fixture = TestBed.createComponent(ButtonGroupWithSelectedButtonComponent);
         fixture.detectChanges();
@@ -190,47 +142,6 @@ describe('IgxButtonGroup', () => {
         expect(btnGroupInstance.deselected.emit).toHaveBeenCalled();
     });
 
-    it('should not select the button on click if selecting event is canceled ', () => {
-        const fixture = TestBed.createComponent(ButtonGroupWithSelectedButtonComponent);
-        fixture.detectChanges();
-
-        const btnGroupInstance = fixture.componentInstance.buttonGroup;
-        fixture.detectChanges();
-
-        btnGroupInstance.buttons[1].select();
-        fixture.detectChanges();
-
-        btnGroupInstance.selecting.subscribe((e) => {
-            e.cancel = true;
-        });
-        fixture.detectChanges();
-
-        const button = fixture.debugElement.nativeElement.querySelector('button');
-        button.click();
-        fixture.detectChanges();
-
-        expect(btnGroupInstance.buttons[0].selected).toBe(false);
-    });
-
-    it('should not deselect the button on click if deselecting event is canceled ', () => {
-        const fixture = TestBed.createComponent(ButtonGroupWithSelectedButtonComponent);
-        fixture.detectChanges();
-
-        const btnGroupInstance = fixture.componentInstance.buttonGroup;
-        fixture.detectChanges();
-
-        btnGroupInstance.deselecting.subscribe((e) => {
-            e.cancel = true;
-        });
-        fixture.detectChanges();
-
-        const button = fixture.debugElement.nativeElement.querySelector('button');
-        button.click();
-        fixture.detectChanges();
-
-        expect(btnGroupInstance.buttons[0].selected).toBe(true);
-    });
-
     it('should should reset its current selection state on selectionMode runtime change', () => {
         const fixture = TestBed.createComponent(ButtonGroupWithSelectedButtonComponent);
         fixture.detectChanges();