Merge pull request #13631 from IgniteUI/ganastasov/fix-13580-16.1

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

Author: ChronosSF

CHANGELOG.md

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

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

@@ -23,7 +23,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';
 
@@ -481,33 +481,29 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      */
     public _clickHandler(index: number) {
         const button = this.buttons[index];
-        const args: IButtonGroupEventArgs = { cancel: false, owner: this, button, index };
+        const args: IButtonGroupEventArgs = { owner: this, button, index };
 
         if (this.selectionMode !== 'multi') {
             this.buttons.forEach((b, i) => {
                 if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
-                    this.deselected.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.selectButton(index);
             this.selected.emit(args);
-            if(!args.cancel){
-                this.selectButton(index);
-            }
         } else {
             if (this.selectionMode !== 'singleRequired') {
+                this.deselectButton(index);
                 this.deselected.emit(args);
-                if(!args.cancel){
-                    this.deselectButton(index);
-                }
             }
         }
     }
 }
 
-export interface IButtonGroupEventArgs extends IBaseEventArgs, CancelableEventArgs {
+export interface IButtonGroupEventArgs extends IBaseEventArgs {
     owner: IgxButtonGroupComponent;
     button: IgxButtonDirective;
     index: number;

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

@@ -142,47 +142,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('should should reset its current selection state on selectionMode runtime change', () => {
         const fixture = TestBed.createComponent(ButtonGroupWithSelectedButtonComponent);
         fixture.detectChanges();