fix(button-group): reset button group on selectionMode prop runtime c…

…hanges (#13542) * fix(button-group): reset button group on selectionMode prop runtime changes
IgniteUI · Oct 16, 2023 · 1564ad1 · 1564ad1
1 parent d11f262
commit 1564ad1
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts
@@ -140,12 +140,25 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     }
 
     /**
-     * An @Input property that sets the selection mode of the buttons. By default, the selection mode is single.
+     * An @Input property that get/set the selection mode 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'.
      * ```html
      * <igx-buttongroup [selectionMode]="'multi'" [alignment]="alignment"></igx-buttongroup>
      * ```
      */
-    @Input() public selectionMode: 'single' | 'singleRequired' | 'multi' = 'single';
+    @Input()
+    public get selectionMode() {
+        return this._selectionMode;
+    }
+    public set selectionMode(selectionMode: 'single' | 'singleRequired' | 'multi') {
+        if (this.viewButtons && selectionMode !== this._selectionMode) {
+            this.buttons.forEach((b,i) => {
+                this.deselectButton(i);
+            });
+            this._selectionMode = selectionMode;
+        } else {
+            this._selectionMode = selectionMode;
+        }
+    }
 
     /**
      * An @Input property that allows setting the buttons in the button group.
@@ -294,6 +307,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     private _isVertical: boolean;
     private _itemContentCssClass: string;
     private _disabled = false;
+    private _selectionMode: 'single' | 'singleRequired' | 'multi' = 'single';
 
     constructor(
         private _cdr: ChangeDetectorRef,

diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts
@@ -183,6 +183,28 @@ describe('IgxButtonGroup', () => {
         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();
+
+        const buttonGroup = fixture.componentInstance.buttonGroup;
+
+        buttonGroup.selectionMode = 'multi';
+        fixture.detectChanges();
+
+        buttonGroup.selectButton(0);
+        buttonGroup.selectButton(1);
+        buttonGroup.selectButton(2);
+        fixture.detectChanges();
+
+        expect(buttonGroup.selectedButtons.length).toBe(3);
+
+        buttonGroup.selectionMode = 'single';
+        fixture.detectChanges();
+
+        expect(buttonGroup.selectedButtons.length).toBe(0);
+    });
+
    it('Button Group single selection', () => {
         const fixture = TestBed.createComponent(InitButtonGroupComponent);
         fixture.detectChanges();