fix(button-group): prevent selected event from emitting twice on click (#14455)

Author: georgianastasov

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

@@ -535,9 +535,8 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
                 if (updatedButtons.length > 0) {
                     updatedButtons.forEach((button) => {
                         const index = this.buttons.map((b) => b.nativeElement).indexOf(button);
-                        const args: IButtonGroupEventArgs = { owner: this, button: this.buttons[index], index };
 
-                        this.updateButtonSelectionState(index, args);
+                        this.updateButtonSelectionState(index);
                     });
                 }
 
@@ -562,13 +561,11 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
         return updated;
     }
 
-    private updateButtonSelectionState(index: number, args: IButtonGroupEventArgs) {
+    private updateButtonSelectionState(index: number) {
         if (this.buttons[index].selected) {
             this.updateSelected(index);
-            this.selected.emit(args);
         } else {
             this.updateDeselected(index);
-            this.deselected.emit(args);
         }
     }
 }

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

@@ -465,6 +465,32 @@ describe('IgxButtonGroup', () => {
         expect(buttonGroup.buttons[0].nativeElement.classList.contains('igx-button-group__item--selected')).toBe(false);
     });
 
+    it('should emit selected event only once per selection', async() => {
+        const fixture = TestBed.createComponent(InitButtonGroupComponent);
+        fixture.detectChanges();
+        await wait();
+
+        const buttonGroup = fixture.componentInstance.buttonGroup;
+
+        spyOn(buttonGroup.selected, 'emit').and.callThrough();
+
+        buttonGroup.selectButton(0);
+        await wait();
+        fixture.detectChanges();
+
+        const buttons = fixture.nativeElement.querySelectorAll('button');
+        buttons[1].click();
+        await wait();
+        fixture.detectChanges();
+
+        expect(buttonGroup.selected.emit).toHaveBeenCalledTimes(1);
+
+        buttons[0].click();
+        await wait();
+        fixture.detectChanges();
+
+        expect(buttonGroup.selected.emit).toHaveBeenCalledTimes(2);
+    });
 });
 
 @Component({