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

#14454)
IgniteUI · Jul 3, 2024 · d825d99 · d825d99
1 parent 72e3a96
commit d825d99
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts
@@ -517,9 +517,8 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
                 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);
                     });
                 }
 
@@ -544,13 +543,11 @@ export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy {
         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);
         }
     }
 }

diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts
@@ -434,6 +434,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({