Merge pull request #13630 from IgniteUI/ganastasov/fix-13580-15.1

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

Author: ChronosSF

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 15.1.33
+
+### General
+- `IgxButtonGroup`:
+    - Reverted cancellable on `selected` and `deselected` events (added in 15.1.24) as it was breaking firing order and related handling.
+
 ## 15.1.0
 
 ### New Features

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

@@ -23,7 +23,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxIconModule } from '../icon/public_api';
 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';
 
 /**
@@ -442,31 +442,27 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      */
     public _clickHandler(index: number) {
         const button = this.buttons[index];
-        const args: IButtonGroupEventArgs = { cancel: false, button, index };
+        const args: IButtonGroupEventArgs = { button, index };
 
         if (!this.multiSelection) {
             this.buttons.forEach((b, i) => {
                 if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
-                    this.deselected.emit({ cancel: false, button: b, index: i });
+                    this.deselected.emit({ button: b, index: i });
                 }
             });
         }
 
         if (this.selectedIndexes.indexOf(index) === -1) {
+            this.selectButton(index);
             this.selected.emit(args);
-            if(!args.cancel){
-                this.selectButton(index);
-            }
         } else {
+            this.deselectButton(index);
             this.deselected.emit(args);
-            if(!args.cancel){
-                this.deselectButton(index);
-            }
         }
     }
 }
 
-export interface IButtonGroupEventArgs extends IBaseEventArgs, CancelableEventArgs {
+export interface IButtonGroupEventArgs extends IBaseEventArgs {
     button: IgxButtonDirective;
     index: number;
 }

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

@@ -146,47 +146,6 @@ describe('IgxButtonGroup', () => {
         expect(btnGroupInstance.deselected.emit).toHaveBeenCalled();
     });
 
-    it('should not select the button on click if event is canceled ', () => {
-        const fixture = TestBed.createComponent(ButtonGroupWithSelectedButtonComponent);
-        fixture.detectChanges();
-
-        const btnGroupInstance = fixture.componentInstance.buttonGroup;
-        fixture.detectChanges();
-
-        btnGroupInstance.buttons[1].select();
-        fixture.detectChanges();
-
-        btnGroupInstance.selected.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 event is canceled ', () => {
-        const fixture = TestBed.createComponent(ButtonGroupWithSelectedButtonComponent);
-        fixture.detectChanges();
-
-        const btnGroupInstance = fixture.componentInstance.buttonGroup;
-        fixture.detectChanges();
-
-        btnGroupInstance.deselected.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('Button Group single selection', () => {
         const fixture = TestBed.createComponent(InitButtonGroupComponent);
         fixture.detectChanges();