Merge pull request #13278 from IgniteUI/simeonoff/fix-13266-16.1.x

fix(button-group): deselected event fired on programmatic deselection
IgniteUI · Jul 18, 2023 · aaa43a7 · aaa43a7
2 parents 0af3371 + 481576c
commit aaa43a7
Show file tree

Hide file tree

Showing 2 changed files with 38 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
@@ -324,7 +324,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     public updateSelected(index: number) {
         const button = this.buttons[index];
 
-        if(this.selectedIndexes.indexOf(index) === -1) {
+        if (this.selectedIndexes.indexOf(index) === -1) {
             this.selectedIndexes.push(index);
         }
 
@@ -375,8 +375,6 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
         if (indexInViewButtons !== -1) {
             this.values[indexInViewButtons].selected = false;
         }
-
-        this.deselected.emit({ button, index });
     }
 
     /**
@@ -445,12 +443,22 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * @hidden
      */
     public _clickHandler(index: number) {
+        const button = this.buttons[index];
+
+        if (!this.multiSelection) {
+            this.buttons.forEach((b, i) => {
+                if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
+                    this.deselected.emit({ button: b, index: i });
+                }
+            });
+        }
+
         if (this.selectedIndexes.indexOf(index) === -1) {
             this.selectButton(index);
-            const button = this.buttons[index];
             this.selected.emit({ button, index });
         } else {
             this.deselectButton(index);
+            this.deselected.emit({ button, index });
         }
     }
 }

diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts
@@ -93,7 +93,7 @@ describe('IgxButtonGroup', () => {
         expect(buttongroup.selectedButtons.length).toEqual(0);
     });
 
-    it('should fire selected event when button is selected by the user interaction, not when it is initially or programmatically selected', () => {
+    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();
 
@@ -116,6 +116,31 @@ describe('IgxButtonGroup', () => {
         expect(btnGroupInstance.selected.emit).toHaveBeenCalled();
     });
 
+    it('should fire the deselected event when a button is 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.deselected, 'emit');
+
+        btnGroupInstance.ngAfterViewInit();
+        fixture.detectChanges();
+
+        expect(btnGroupInstance.deselected.emit).not.toHaveBeenCalled();
+
+        btnGroupInstance.buttons[1].deselect();
+        fixture.detectChanges();
+
+        expect(btnGroupInstance.deselected.emit).not.toHaveBeenCalled();
+
+        const button = fixture.debugElement.nativeElement.querySelector('button');
+        button.click();
+
+        expect(btnGroupInstance.deselected.emit).toHaveBeenCalled();
+    });
+
    it('Button Group single selection', () => {
         const fixture = TestBed.createComponent(InitButtonGroupComponent);
         fixture.detectChanges();